父容器
display: grid;display: inline-grid;
設為網(wǎng)格布局以后芹彬，容器子元素（項目）的float、display: inline-block叉庐、display: table-cell舒帮、vertical-align和column-*等設置都將失效。grid-template-columns屬性定義每一列的列寬陡叠，grid-template-rows屬性定義每一行的行高玩郊。column-gap：列間距
row-gap： 行間距
grid-gap: <row-gap> <column-gap>;網(wǎng)格線，3 x 3 行的網(wǎng)格有 4 x 4 根網(wǎng)格線枉阵，每根線译红，從 row 或 column 方向從 1 開始遞增。
demo item-1 將一個項目放到網(wǎng)格固定的位置兴溜，通過 start侦厚、end 可以橫跨單元格耻陕，其值可以是數(shù)字（代表網(wǎng)格線的名字），可以是span關鍵字刨沦，代表占用幾個單元格诗宣。
grid-row-start
grid-row-end
grid-column-start
grid-column-end
demo item-2 grid-row、grid-column
grid-row : <grid-row-start> / <grid-row-end>
grid-column同理
demo item-3 grid-area
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end
實例
.container {
display: grid;
/* 分 3 列想诅，每列寬 100px */
grid-template-columns: 100px 100px 100px;
/* 分 3 行召庞，每行高 100px */
grid-template-rows: 100px 100px 100px;
}
#container{
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
}
#container{
display: grid;
grid-template-columns: repeat(3, 100px);
}
repeat() 接受兩個參數(shù)，第一個參數(shù)是重復的次數(shù)来破，第二個參數(shù)是所要重復的值篮灼。
#container{
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
上面代碼表示每列寬度 100px，然后自動填充讳癌，直到容器不能放置更多的列穿稳。
- fr關鍵字 比例關系，可以與絕對長度的單位結合使用
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
- minmax() 長度范圍
#container{
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
}
表示最小 100px晌坤，最大 1fr逢艘。
- auto 由瀏覽器自己決定長度
#container{
display: grid;
grid-template-columns: 100px 100px auto;
}
https://learncssgrid.com/
https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
