web九宫格 css中九宫格图片排版代码

使用repeat(3， 1fr)一行定义三行三列等九宫格，gap统一控制间距，place-items：center一键居中内容，grid-column/row精准定位元素。

分

使用repeat()和fr单行就可以写出标准九宫格，根本不用手动写9个grid-template-rows/columns。

直接用repeat(3， 1fr)定义三等分行列

九宫格本质是3×3等分网格，CSS Grid天然支持重复模式：grid-template-columns：repeat(3， 1fr)；——三列均分容器宽度grid-template-rows：repeat(3， 1fr)；——三行均分容器高度合起来就是「九宫格」，响应式动物园，自动加自适应间隙一种打开方式

限制使用时不使用 Margin，统一用间隙：gap： 12px；同时作用于行距和距也可分开写：row-gap： 8px；column-gap： 16px；gap 会自动关注容器边界，比 margin Place-items 一行搞定

名让每个格子内的文字、图标凪动居中，另加额外类或 flex：AppStruct

无代码应开发平台 132 查看思路

立即学习“前沿免费学习笔记（深入）”；place-items：center；——同时设置 justify-items 和align-items 若只要水平居中：justify-items：center；孩子们的家在正门中间，在入口显示的中间：grid；place-content：center；想法是出去到中间给孩子的门。 grid-column/grid-row 最终决定

孩子原计划是进入商店1-9，可以用它来代替。元素个（中心）跨两行两列：grid-column： 2 / 4； grid-row： 2 / 4；让独标题占第一行：grid-column： 1 / -1； grid-row： 1;可以调整屏幕的大小。通过重复一次，就可以阅读并理解书中的内容。概括：

css绝对定位 css浮动显示边距列flex大家都在看：css如何实现自定义的属性 css中BFC布局规则是什么css中z-index属性 css中fraction如何使用css字母大小如何理解