1.網格容器:通過display屬性設置屬性值為grid或inline-grid可以創建一個網格容器。網格容器中的所有子元素就會自動變成網格項目（grid item）

1.1網格項目默認放在行中，并且跨網格容器的全寬

2.顯示網格:使用grid-template-columns和grid-template-rows屬性可以顯式的設置一個網格的列和行

2.1grid-template-rows指定的每個值可以創建每行的高度。行高的尺寸可以是任何非負值，長度可以是px、%、em等長度單位的值。

item1和item2具有固定的高，分別為50px和100px。因為只定義了兩個行的高度值，所以item3和item4的高度是根據其自身的內容來定義

2.2grid-template-columns指定的每個值來創建每列的列寬

item4、item5和item6放置在新的一行（第二行），因為grid-template-columns只定義了三列的大小，它們也分別放置在列1、列2和列3；其中列1、列2和列3的尺寸大小等于item1、item2和item3寬度

fr單位可以幫助我們創建一個彈列的網格軌道。它代表了網格容器中可用的空間（就像Flexbox中無單位的值）

在這個示例中，網格容器分成了4等份（1 + 1 + 2 = 4），每一份（1fr）是網格容器寬度的四分之一。所以item1和item2的寬度是網格容器的四分之一寬，item3是網格容器寬度的四分之二（2fr）

當fr和其它長度單位的值結合在一起的時候，fr是基于網格容器可用空間來計算

在這個示例中，網格容器可用空間是網格寬度減去3rem和25%剩下的寬度，而fr就是基于這個尺寸計算

3.網格軌道最小和最大尺寸:可以通過minmax()函數來創建網格軌道的最小或最大尺寸

minmax()函數接受兩個參數：第一個參數定義網格軌道的最小值，第二個參數定義網格軌道的最大值。可以接受任何長度值，也接受auto值。auto值允許網格軌道基于內容的尺寸拉伸或擠壓

在這個示例中，第一行的高度最小值是100px，但其最大值為auto，允許行高可以變大超過100px

第一列設置了最小值為auto，但它的最大值是50%，也就是列的最大寬度不會超過網格容器寬度的50%

4.重復網格軌道:使用repeat()可以創建重復的網格軌道。這個適用于創建相等尺寸的網格項目和多個網格項目

repeat()也接受兩個參數：第一個參數定義網格軌道應該重復的次數，第二個參數定義每個軌道的尺寸

在這個示例中，第一列和最后一列的寬度都是30px，并且它們之間有另列三列，這三列是通過repeat()來創建的，而且每列的列寬是1fr（1fr = (網格寬度 - 30px - 30px) / 3）

總結

以上是生活随笔為你收集整理的CSS Grid布局(1)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。