css grid 是建立網格布局強大的工具，在2023年，已獲得主流瀏覽器的原生支援（chrome，firefox，edge，safiri），這篇部落格帶你快速上手 grid 布局
在前端領域，提到某個新技術，想在實際開發中使用它，就不得不考慮相容性問題，目前 grid 布局在各大主流瀏覽器已實現支援，如下：
這裡是乙個網格布局，由父元素container和若干子元素item組成
123456要想將其變為網格布局，需要給
container設定display: grid屬性，然後使用grid-template-row和grid-template-column屬性來定義行和列。
.container得到的效果如下：
給grid-template-columns設定了三個值，因此得到了三列，給grid-template-rows設定了兩個值，因此得到了兩行。
這兩個屬性還可以取以下值：
舉個栗子
.container可以看到，第二列將剩餘空間全部佔滿。結果如下：
再看這個
.container第一列和第二列均為 1fr，因此他們將等分 150px 以外的寬度。
如果有重複項，可以利用repeat()簡化，上面的例子還可以寫成這樣：
.container要想調整 item 的大小，可以使用
grid-column和grid-row來設定：
.container這裡設定了乙個 3x3 的布局，頁面只顯示了6個的原因是我們只有6個item來填充這個網格，假如我們再加乙個item元素，那麼右下角的空白將會被填滿。.item:nth-child(1)
這裡我們讓第乙個 item 從第一根網格線開始，到第四根網格線結束，因此它將佔據一整行。至於為什麼三個網格會有四根網格線，看下圖你就明白了：
上面的**還可以這樣簡寫：
.item:nth-child(1)下面我們來實踐一下
如果想讓網格之間有一定間隙，grid 布局提供了乙個屬性grid-gap，可以指定網格間距，而不需要我們手動新增margin屬性。例如在上面的例子中將container屬性增加如下兩行：
.container如果 column 和 row 的值一樣，可以簡寫為grid-gap:
.container快速了解Grid布局
給元素新增 grid 或 inline grid 樣式 使用 grid template columns 設定每一列的寬度 使用 gird template rows 設定每一行的高度 div 注意 屬性可以使用 repeat函式 進行書寫。如 分為8列，每列百分之12.5。repeat 8,12....
Grid網格布局入門
1.作用在父容器上的屬性 1 display grid 2 grid template columns 設定列數 3 grid template rows 設定行數 從 中可以看到，給box設定了三行三列的網格，每乙個網格寬高分別為100px 100px 這樣重複設定同樣的值會比較麻煩，這時候我們可...
Grid網格布局入門筆記
指定乙個容器採用網格布局，在父元素中定義grid屬性 display grid 塊級元素布局 或display inline grid 行內元素 在容器中新增了網格布局後，就要劃分行和列，columns 列 row 行 grid template columns 定義每一列的寬度 grid temp...