轉載說明：原創不易，未經授權，謝絕任何形式的轉載
網格系統（CSS Grid）是CSS中最重要的特性之一。它能夠以簡單的方式将元素對齊到列和行中。CSS網格使得設計複雜且響應式的網頁變得更加容易，無需使用浮動、表格或定位。它還具有許多更強大的功能，如果你多加練習，就能發現它們。
在本文中，我們将通過一些實際示例來學習CSS網格，以幫助你更好地了解。讓我們開始吧。
定義一個容器
要開始使用網格系統，你需要定義一個容器div或父級div，将所有子元素包裹在其中，如下所示：
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div> 當我們在CSS中将父級div的display屬性設定為grid或inline-grid時，父級div将成為一個網格容器。
下面是一個例子：
.container {
display: grid;
background-color: crimson;
padding: 10px;
}
.container > .child {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
font-size: 30px;
margin: 5px;
} 
現在你可以使用容器屬性，例如justify-content和align-items，來将子元素居中在容器div内。我們将在下面的示例中介紹這些屬性。
網格模闆列（grid-template-columns）
屬性grid-template-columns用于定義網格容器中的列數。它還可以幫助定義每個列的寬度。
假設你想在網格容器内定義3列。在這種情況下，你可以使用分數（fractions）作為grid-template-columns屬性的值。分數用于将網格布局分割成列或行。
看看下面的例子：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: crimson;
padding: 10px;
}
.container > .child {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
font-size: 30px;
margin: 5px;
} 如你在上面看到的，我們使用了3個分數1fr來将網格容器分為3列。
grid-template-columns屬性還可以用于指定列的寬度。
.container {
display: grid;
grid-template-columns: 200px 50px 150px 100px;
} 除此之外，你還可以将grid-template-columns屬性設定為auto。這樣，它會根據螢幕大小自動拉伸列的寬度。
下面是一個例子：
.container {
display: grid;
grid-template-columns: auto auto;
} 其中一個最好的功能是你可以輕松地使用grid-template-columns和minmax()函數建立自适應布局，該函數根據螢幕大小設定最小寬度和最大寬度。
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 例如，假設你需要在一個電子商務應用中展示産品清單。你的任務是使其具有響應式布局，是以你決定在桌面上每列顯示三個産品，在平闆上每列顯示兩個産品，而在手機上每列隻顯示一個産品。請看下面的示例：
HTML:
<div class="grid">
<div class="item">Product 1</div>
<div class="item">Product 2</div>
<div class="item">Product 3</div>
<div class="item">Product 4</div>
<div class="item">Product 5</div>
<div class="item">Product 6</div>
</div> CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
margin-top: 150px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.item{
background: red;
padding: 20px;
color: wheat;
margin: 10px;
}
這樣做也會根據螢幕大小自動定義列的數量。當螢幕寬度達到最小尺寸時，你将隻有1列寬度為1fr。如果螢幕寬度太大，你将擁有許多寬度為200px的列。
網格模闆行（grid-template-rows）
屬性grid-template-rows用于定義網格容器中的行數。它與grid-template-columns類似，唯一的差別是現在我們是在處理行而不是列。
假設我們想要定義一個具有兩列和兩行的網格容器。我們可以使用grid-template-rows和grid-template-columns兩個屬性來實作。下面是一個示例：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
} 你也可以使用grid-template-rows屬性來定義行的寬度，或者像我們使用grid-template-columns那樣自動拉伸行的寬度。它們之間沒有差別，隻是我們是在處理行而不是列。
網格間隔屬性（grid-gap）
網格間隔屬性grid-gap用于在父元素内設定列和行之間的間隔。
.container{
display: grid;
grid-template-columns: auto auto;
grid-gap: 15px;
} 對齊内容屬性（align-content）
對齊内容屬性align-content用于垂直對齊容器内的所有網格。
下面是一個例子：
.container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 50px 80px;
height: 400px;
align-content: center;
background-color: crimson;
padding: 10px;
}
還有其他一些可以傳遞給align-content的值，例如space-between（兩端對齊）、start（頂部對齊）、space-around（均勻分布）、end（底部對齊）等。你可以在文本編輯器上嘗試它們，以檢視它們之間的差別。
網格項（Grid Items）
CSS網格還有一些有用的屬性，你可以将它們傳遞給網格容器的子元素，以便輕松設計複雜的網格布局。其中一些屬性包括：grid-column 、grid-row 、grid-area ，你可以在W3schools網站上了解它們，因為如果我在這篇文章中詳細講解它們，你可能要滾動一輩子才能看完。
結論
網格是一個令人驚歎的CSS特性，它使你能夠輕松設計複雜且響應式的布局結構。我強烈建議你多加練習這個特性，因為隻有通過實踐才能更好地掌握它。
由于文章内容篇幅有限，今天的内容就分享到這裡，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請别忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想擷取更多前端技術的知識，歡迎關注我，您的支援将是我分享最大的動力。我會持續輸出更多内容，敬請期待。
原文：https://medium.com/javascript-in-plain-english/css-grid-explained-with-examples-d64cf241e1cf
作者：Mehdi Aoussiad
非直接翻譯，有自行改編和添加部分，翻譯水準有限，難免有疏漏，歡迎指正