.container { display: grid; height: 100vh; grid-gap: 10px;}.item { background: lightcoral;}我们为上面的 dom 结构使用了网格布局，并使用grid-gap增加了风格之间的间距复杂版式设置。现在，我们使用grid-template-columns属性来添加一些列。
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-columns: 100px 200px auto auto;}就像这样，我们使用了列复杂版式设置。我们指定第一列为100px，第二列为200px。由于我们在第3列和第4列中应用了auto，因此剩余的屏幕长度将在其中分成两半。
可以看到现在页面中有一个空白复杂版式设置。如果我想将第六列移至第三列和第四列怎么办？为此，我们可以使用grid-column-start和grid-column-end属性。
.item:nth-of-type(6) { grid-column-start: 3; grid-column-end: 5;}注意，我们使用grid-column-end: 5，值5指向列线复杂版式设置。第四列在网格的第五行结束。grid-column-start和grid-column-end值是指网格线。
如果你觉得网格线的值让人困惑复杂版式设置，你也可以使用span，下面的效果与上面一样：
.item:nth-of-type(6) { grid-column-start: 3; grid-column-end: span 2;}对于span 2，指定div占用网格中的两个插槽复杂版式设置。现在，假设要扩展第二列填充下面的空白区域。我们也可以通过grid-column-start属性轻松地做到这一点。
.item:nth-of-type(2) { grid-row-start: span 2;}我们使用span和grid-row-start来指定我们想要占据两个插槽复杂版式设置。
如上所见，我们已经能够使用少量的CSS网格属性来构建非常复杂的布局复杂版式设置。
有效地使用 grid-templates现在来看看grid-templates，在本节中，我们将讨论如何为不同的屏幕大小创建不同的布局复杂版式设置。
首先复杂版式设置，还是先来一段 dom 结构：
`` .container { display: grid; height: 100vh; grid-gap: 10px; }
.container > * { background: coral; display: flex; justify-content: center; align-items: center; }` ``
我们给元素添加了背景色复杂版式设置。从上面的代码中可以看到，我们也使用了flex属性。我们可以将flex和grid结合在一起。在这个特殊的例子中，我们使用flex属性中心对齐内容。
对于移动端，我们希望section在header下面，right 在 section下面，我们可以使用网格区域来完成复杂版式设置。首先，我们定义网格区域：
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-areas: "header" "section" "right" "left" "footer"}aside:nth-of-type(1) { grid-area: left;}aside:nth-of-type(2) { grid-area: right;}section { grid-area: section;}footer { grid-area: footer;}header { grid-area: header;}在 grid-template-areas 中可以看到，我们先有header ，然后是section，然后是right，最后是left复杂版式设置。此外，我们希望我们的section比 left 和 right都大点。为了实现这一点，我们可以使用rid-template-rows属性
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-areas: "header" "section" "right" "left" "footer"; grid-template-rows: 1fr 6fr 2fr 2fr 1fr;}少了一张图片
我们可以根据需要设置移动端的视图复杂版式设置，接下我们使用媒体查询来适配一下大屏幕：
@media (min-width: 500px) { .container { grid-template-areas: "header header header" "left section right" "footer footer right"; grid-template-rows: 1fr 6fr 1fr; grid-template-columns: 1fr 6fr 1fr; }}如何使用minmax函数动态跟踪元素的大小假设我们有两列，它们均匀地占据了屏幕上的可用空间复杂版式设置。通过使用 grid-template-columns，我们可以很容易地做到这一点。但是，如果我们想要其中一个在200px到500px之间呢?我们的列可以适应不同的屏幕尺寸，但其中一个永远不会大于500px或小于200px。
对于这些类型的场景，我们使用minmax函数复杂版式设置。让我们来看看它的实际效果。
如何使用 repeat 函数？我们讨论一下元素中的重复模式复杂版式设置。我们如何处理它们?我们可以重复我们的代码或使用Javascript。不过，还有另一种方法可以用css来实现。repeat函数表示轨道列表的一个重复片段，允许以更紧凑的形式编写显示重复模式的大量列或行。
This item is 50 pixels wide. Item with flexible width. This item is 50 pixels wide. Item with flexible width. Inflexible item of 100 pixels width. #container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px;}#container > div { background-color: #8ca0ff; padding: 5px;}
嵌套网格我还可以将网格嵌套在另一个网格中复杂版式设置， 来看看如何实现这一点：
.container { display: grid; height: 100vh; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, auto))}注意，我们在网格模板中有一个repeat函数，并将其与一个minmax函数组合在一起复杂版式设置。我们现在也可以将网格属性应用到内部网格。
.inner-grid { display: grid; background: white; height: 100%; grid-gap: 5px; grid-template-columns: repeat(3, auto);}这样，我们网格中嵌套了一个网格复杂版式设置。
今天就跟大家分享到这里复杂版式设置，感谢大家的观看，我们下期再见！
作者：Shadid Haque 译者：前端小智 来源：soshace
原文：https://blog.soshace.com/how-to-build-complex-layouts-with-css-grid/
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有