（推薦教學：CSS教學）
網格版面是現代CSS中最強大的功能之一。使用網格佈局可以幫助我們在沒有任何外部 UI 框架的情況下建立複雜的、快速響亮的佈局。在這篇文章中，將會介紹所有我們需要了解的 CSS 網格知識 。
我們直接進入程式碼，如下圖所示，先寫些標籤，原始碼在這個連結裡面：https://codepen.io/Shadid/pen/ zYqNvgv
<p> <header>Header</header> <aside>Aside 1</aside> <section>Section</section> <aside>Aside 2</aside> <footer>Footer</footer> </p>
在上面，我們創建了一個header、兩個aside和一個footer元素，並將它們包裝在一個container 元素中。我們為容器元素中的所有元素新增背景色和字體大小。
.container > * {
background: aquamarine;
font-size: 30px;
}
運行的網頁如下：
現在我們加入一些網格屬性：
.container {
display: grid;
grid-gap: 5px;
grid-template-areas:
"header"
"aside-1"
"aside-2"
"section"
"footer"
}
/* Assign grid areas to elements */
header {
grid-area: header;
}
aside:nth-of-type(1) {
grid-area: aside-1;
}
aside:nth-of-type(2) {
grid-area: aside-2;
}
section {
grid-area: section;
}
footer {
grid-area: footer;
}
首先，我們定義了 display:grid，它將啟用網格佈局，然後我們使用grid-gap在網格元素中增加間隙。
接下來，我們為每個html元素分配了一個網格區域名稱。在container 類別中，我們可以使用grid-template-areas`屬性定 義html 模板的外觀，注意網格模板區域是如何排列的。
grid-template-areas: "header" "aside-1" "aside-2" "section" "footer"
元素的順序與 dom 結構不同。但是，最終按我們網路區域的順序來展示。
下一步是讓我們的頁面具有回應性。我們希望在更大的螢幕上使用不同的佈局。 CSS網格使得處理媒體查詢和建立響應式佈局變得非常容易。看下面程式碼：
@media (min-width: 670px) {
.container {
grid-template-areas:
"header header header"
"aside-1 section aside-2"
"footer footer footer"
}
}
我們要做的就是在媒體查詢中重新排序網格模板區域。
如何使用 CSS 網格來組織列和？先從下面的程式碼開始：
<p> </p><p>One</p> <p>Two</p> <p>Three</p> <p>Four</p> <p>Five</p> <p>Six</p>
新增一些基本的css
.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 ，指定p佔用網格中的兩個插槽。現在，假設要擴充第二列填滿下面的空白區域。我們也可以透過grid-column-start屬性輕鬆地做到這一點。
.item:nth-of-type(2) {
grid-row-start: span 2;
}
我們使用span和grid-row-start#來指定我們想要佔據兩個插槽。
如上所見，我們已經能夠使用少量的CSS網格屬性來建立非常複雜的佈局。
現在來看看grid-templates，在本節中，我們將討論如何為不同的螢幕大小建立不同的佈局。
首先，還是先來一段 dom 結構：
<p> <header>header</header> <aside>Left</aside> <section>Section</section> <aside>Right</aside> <footer>Footer</footer> </p>
接著，加入一些樣式：
``
.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函数。 让我们来看看它的实际效果。
<p> </p><p>One</p> <p>Two</p>
.container {
display: grid;
height: 100vh;
grid-template-columns: minmax(200px, 500px) minmax(100px, auto);
}
.one {
background: cyan;
}
.two {
background: pink;
}
在这个例子中，第一列总是在200px到500px之间。然而，第二列的最小值可以是100px，对于更大的屏幕，它将覆盖屏幕的其余部分。
我们讨论一下元素中的重复模式。我们如何处理它们?我们可以重复我们的代码或使用javascript。不过，还有另一种方法可以用css来实现。repeat函数表示轨道列表的一个重复片段，允许以更紧凑的形式编写显示重复模式的大量列或行。
<p> </p><p> This item is 50 pixels wide. </p> <p> Item with flexible width. </p> <p> This item is 50 pixels wide. </p> <p> Item with flexible width. </p> <p> Inflexible item of 100 pixels width. </p>
#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 > p {
background-color: #8ca0ff;
padding: 5px;
}
我还可以将网格嵌套在另一个网格中， 来看看如何实现这一点：
<p> </p><p>One</p> <p>Two</p>Three
i
ii
iii
iv
v
vi
Five
Six
我们首先在外部container上声明网格：
.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);
}
这样，我们网格中嵌套了一个网格。
今天就跟大家分享到这里，感谢大家的观看，我们下期再见！
原文地址：https://blog.soshace.com/how-to-build-complex-layouts-with-css-grid/
作者：Shadid Haque
更多编程相关知识，请访问：编程入门！！
以上是使用css grid建立複雜佈局的小技巧！ （值得收藏）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
