css grid是乙個強大的 web 二維布局工具，能夠以行和列來進行布局；
通過設定display的屬性為grid或inline-grid來建立網格容器；
display: grid
預設行排列，寬度為容器的寬度；
display: inline-grid.container複製**圖1-1.png
grid-template-rows：.container複製**圖1-2.png
none | |
grid-template-columns：none | |
這兩個屬性差不多的，乙個是行乙個是列，***就以grid-template-columns來舉例子；
where
= [ ? [ | ] ]+ ?
where
= [ ? [ | ] ]* ? [ ? [ | ] ]* ?
grid-template-columns:→
where
= | minmax( , ) | fit-content( [ | ] )
2.1 示例：（）
where
= | | min-content | max-content | auto
：css資料型別，表示網格容器內的靈活長度（如1fr,1.5fr）;
2.2 示例：（.container複製**圖2.1.png
minmax( , )）
設定最小和最大的列寬度
where
= | | min-content | max-content | auto
2.3 示例：（.container複製**圖2-2(1).png (寬度最大1fr時)
圖2-2(2).png (寬度最小200px時)
fit-content( [ | ] )）
grid-template-columns:"container">內容不足300px,適應內容的寬度
我這裡內容比較多,超過300px了，但是我不能比設定的最大寬度300px更寬了。
我就要剩下的了
複製**
圖2-3.png
→
where
= repeat( [ ] , [ ? ]+ ? )
2.4 示例：(repeat( [ ] , [ ? ]+ ? ))
第乙個引數：規定應重複的數量，也就是分成幾列；
第二個引數：規定分成的列的寬度；
grid-template-columns:.container複製**圖2-4.png
where
=
where
= [ ? [ | ] ]* ?
where
= repeat( [ auto-fill | auto-fit ] , [ ? ]+ ? )
2.5 示例：（grid-template-columns:）
grid-gap:.container複製**圖2-5.png
<'grid-row-gap'> <'grid-column-gap'>?
第乙個引數：行的間隙
第二個引數：列的間隙
3.1 示例：
網格線本質上是表示列和行軌跡的開始，結束或之間的行。.container複製**圖3-1.png
從軌道開始和網格方向開始的每一行從1開始遞增編號。
如圖4-1.png，這個3x2網格可以生成4x3的網格線，裡面的1,2,3,4,5,6塊就根據這些網格線來進行定位；
圖4-1.png
grid-row：[ / ]?
where
= auto | | [ && ? ] | [ span && [ || ] ]
grid-column：[ / ]?
where
= auto | | [ && ? ] | [ span && [ || ] ]
4.1 示例：
還可以實現跨行或列.item 複製**圖4-1.png
還可以使用span來實現跨行或列.item複製**圖4-2.png
使用.container.item1
.item2複製**
"container">"item1">1
"item2">234
5複製**
圖4-3.png
grid-auto-rows, grid-auto-columns, grid-auto-flow來設定隱式網格；
css grid.container 複製**圖5-1.png
mdn
CSS Grid 網格 布局
grid template columns grid template rows grid template areas grid template grid column gap grid row gap grid gap justify items align items justify con...
CSS Grid 網格布局
概念 grid布局又稱css網格布局，又名 網格 是乙個二維的基於網格的布局系統，其目的只在於完全改變我們設計基於網格的使用者介面的方式 和grid template columns一起，單位統一 a.fr單位 b.repeat 方法 注 網格中提供了乙個新的單位 fr 比例單位 寫法 例子 12 ...
Css Grid 網格布局
同 指定容器內部的多個專案的位置 異 指定三行三列 寬高為10px grid template columns 10px 10px 10px grid template rows 10px 10px 10px簡寫 grid template columns repeat 3,10px auto fi...