摘要：因而我们可以设置整个部分垂直居中和水平居中其他的对齐方式和中展现的类似，在此不再赘述。如上所述，使用这个属性可以使某个子元素占据在容器元素属性中定义的区域可以看到，号元素占据了区域。
参考资料：https://www.bilibili.com/video/BV1Bk4y197xm
从某种程度上说，grid布局是flex布局的升级版，主要用于元素在平面上的布局，例如我当前博客皮肤主页上每个随笔卡片的排布：
bilibili首页上图片链接的排版：
可以看出，grid布局往往用于在平面上排列元素，而且可以达到不错的效果。
这也是grid布局和flex布局的主要差异，即：
和flex布局类似，grid布局也涉及容器元素和子元素，我们可能需要在两种元素内都设置相应的css属性才能得到希望的结果。
grid布局中的基本概念如下图所示：
要启用grid布局，和flex布局一样，只需要修改容器元素的displaycss属性为grid即可，如：
.grid-container { display: grid;}首先是grid-template-columns，它可以用于设置当前排列元素有多少列以及每列的宽度，例如设置：
.grid-container { display: grid; grid-template-columns: 100px 100px 100px; ...}这样设置代表排列元素为三列，每列的宽度为100px，效果如下：
同理，我们也可以设置排列元素的行数以及每一行的高度：
.grid-container { ... grid-template-rows: 100px 100px 100px 100px;}
调试工具下的效果：
像刚才那样设置元素的行列可能会遇到一种麻烦的情况，例如如果列数有10列，那么我们则需要写10次列的宽度，此时我们就可以使用repeat写法进行简化，即：
.grid-container { grid-template-columns: repeat(3, 100px); /* => 100px 100px 100px */}第一个参数是数量，第二个参数是大小。
此外，repeat里的第一个参数也可以设置为auto-fill，这样子元素就会根据父元素的宽度大小进行自适应排列了，例如：
fr可以方便地表示比例关系，和flex布局中给子元素设置flex属性表示自己的占比类似。
例如在这里希望容器分成三列，并且每列等分容器的宽度，那么我们可以这样写：
.grid-container { grid-template-columns: repeat(3, 1fr);}这代表着每行的每个元素都占据一份的剩余空间，因此可以实现三等分的效果：
我们也可以自定义比例，例如：
.grid-container { grid-template-columns: 1fr 2fr 3fr;}
可以看出，各列的宽度变成了1:2:3。
例子如下：
.grid-container { grid-template-columns: 100px auto 100px;}此时代表左右两列各占用100px宽度，而中间则自动填充满，这样既是我们前面使用flex布局所得到的三栏布局：
显而易见，这两个属性都是用于设置子元素之间间距的大小的
例如设置行间距：
.grid-container { ... row-gap: 20px;}
列间距是类似的，这里不赘述了。
此外还可以直接使用gap来简化两个间距的设置：
.grid-container { ... gap: 20px;}
这个属性主要用于设置元素是以行优先还是列优先进行排列的，默认为行优先，因此我们进行这样的修改：
.grid-container { grid-auto-flow: column;}效果如下：
dense关键字
例如一些这种情况：
这里1号和2号元素的宽度都比较大，2号元素无法放在1号元素的右边，因此1号元素右边就出现了一个空位，而此时我们希望3号元素能够向上占据这个空位进行紧密的排列，此时我们就可以在grid-auto-flow属性后添加dense关键字：
.grid-container { grid-auto-flow: row dense;}
可以看到，此时完成了我们紧密排列的需求。
这个属性用于设置子元素元素在网格内的水平方向上的对齐。
这个属性即用于设置子元素在规定的网格中是以什么样的方式进行对齐的，具体效果如上图所示，其默认值为stretch（拉伸），这也就是为什么我们看到子元素占满了各自的网格。
同理，这个属性用于设置子元素元素在网格内的垂直方向上的对齐，这里不展开了。
这个属性是上面两个属性的简写，即：
.grid-container { place-items: center center; /* => justify-items:center; align-items: center; */}
这里的“整个内容区域”指的是前面红色概念图中的红色方框区域，并不是值整个容器，例如原来的例子中的content为下图绿色边框包围的最外围区域：
因此，这个属性是用于设置content关于整个容器的对齐关系的。
因而我们可以设置整个部分垂直居中和水平居中：
.grid-container { ... justify-content: center; align-content: center;}
其他的对齐方式和flex中展现的类似，在此不再赘述。
这两个属性分别用于设置多出来的项目的宽和高：
使用方式如下案例所示：
.grid-container { grid-template-areas: a b b a c d a e f;}这里区域的命名可以是任意的英文单词，上面代码所对应的实际区域为：
这里只是定义区域，在子元素属性上进行相应的设置可以使该子元素占据某个区域。
简写：
.item { grid-column: 1 / 3; /* => grid-column-start: 1; grid-column-end: 3; */}另一种写法：使用span
.item { grid-column-start: span 2; }代码的效果和上面相同。
如上所述，使用这个属性可以使某个子元素占据在容器元素属性中定义的区域：
.item-1 { grid-area: a;}
可以看到，1号元素占据了a区域。
此外，grid-area还可以用于简写上面的item位置设置：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/123656.html
摘要：布局学习笔记布局学习笔记好久没有写博客了上关于布局的知识比较零散正好根据我这几个月的实践对布局做一个总结以备查阅基础用法基础用法布局的核心属性有个总的来说布局就是父元素先定义好自己有几行几列然后子元素定义自己在第几行第几列可CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查...
摘要：你可以用网格这样做这样的显示效果是没什么错误的，当使用网格，重新定义列数非常简单。绝对定位当我们绝对定位一个网格元素的时候，这个元素会跑到它的容器中，我们可以用和来定位它。最简单的命名约定使用网格自动编号。 注：此文是我翻译的第一篇技术文章。适合有一定CSS原生网格布局使用经验的开发者（读前需要先去了解一下原生CSS网格的语法），原生CSS网格布局（Native CSS grid）截止...
摘要：你可以用网格这样做这样的显示效果是没什么错误的，当使用网格，重新定义列数非常简单。绝对定位当我们绝对定位一个网格元素的时候，这个元素会跑到它的容器中，我们可以用和来定位它。最简单的命名约定使用网格自动编号。 注：此文是我翻译的第一篇技术文章。适合有一定CSS原生网格布局使用经验的开发者（读前需要先去了解一下原生CSS网格的语法），原生CSS网格布局（Native CSS grid）截止...
摘要：前情提要本人是一个学渣非科班入行年了吧前端东西真的好多啊又不断更新需要不断的学学学在去年年底开始我就开始不断的寻找学习的方法如何更加高效的学习如何才能学的又快又好在这半年来不断的总结慢慢找到了一些方法和诀窍此文章不是网格布局的教学文章只前情提要 本人是一个学渣,非科班入行2年了吧,前端东西真的好多啊,又不断更新.需要不断的学学学, showImg(https://user-gold-c...
阅读 434·2023-04-25 19:43
阅读 3627·2021-11-30 14:52
阅读 3420·2021-11-30 14:52
阅读 3527·2021-11-29 11:00
阅读 3496·2021-11-29 11:00
阅读 3525·2021-11-29 11:00
阅读 3262·2021-11-29 11:00
阅读 5424·2021-11-29 11:00
