實現(xiàn)伸縮布局
<div class="container">
<div><img src="./images/cat.jpg"/></div>
<div><img src="./images/cat.jpg"/></div>
<div><img src="./images/cat.jpg"/></div>
<div><img src="./images/cat.jpg"/></div>
<div><img src="./images/cat.jpg"/></div>
<div><img src="./images/cat.jpg"/></div>
</div>
.container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(6, 50px);
}
.container>div>img{
width:100%;
height: 100%;
object-fit: cover;
}
容器屬性
display:grid; 指定一個容器采用塊級網(wǎng)格布局
display: inline-grid; 指定一個容器采用行內(nèi)塊級網(wǎng)格布局
容器設(shè)置成網(wǎng)格布局后不同，內(nèi)部項目的float算柳、display:inline-block苛预、display:table-cell;市殷、vertival-align和column-*等設(shè)置都將失效
grid-template-columns 定義每一列的列寬
grid-template-rows 定義每一行的行高
repeat() 接受兩個參數(shù)窜醉， 第一個參數(shù)是重復(fù)的次數(shù)， 第二個參數(shù)是所要重復(fù)的值
repeat() 重復(fù)某種模式也是可以的
auto-fill 有時候單元格的大小固定购撼，容器不固定蔬将。如果希望每一行（或每一列）容納盡可能多的單元格斋扰，這是可以使用auto-fill關(guān)鍵字表示自動填充
fr 為了方便表示比例關(guān)系渡八，網(wǎng)格布局提供了fr關(guān)鍵字（fraction 的縮寫，意為"片段"）传货。如果兩列的寬度分別為1fr和2fr屎鳍，就表示后者是前者的兩倍。
minmax()函數(shù)產(chǎn)生一個長度范圍问裕，表示長度就在這個范圍之中逮壁。它接受兩個參數(shù)，分別為最小值和最大值粮宛。
auto表示由瀏覽器自己決定長度 grid-template-columns: 100px auto 100px;
[c1]使用方括號指定網(wǎng)格線的名稱貌踏，同一根網(wǎng)格線允許有多個名字·[fifth-line row-5]
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-row-gap設(shè)置行與行的間隔（行間距)
grid-column-gap設(shè)置列與列的間隔（列間距）
grip-gap grid-column-gap和grid-row-gap的合并簡寫形式
grid-gap: <grid-row-gap> <grid-column-gap>; grid-gap: 20px 省略了第二個值，瀏覽器認為第二個值等于第一個值
根據(jù)最新標準窟勃，上面三個屬性名的grid-前綴已經(jīng)刪除，grid-column-gap和grid-row-gap寫成column-gap和row-gap逗堵，grid-gap寫成gap秉氧。
grid-template-areas用于定義區(qū)域。一個區(qū)域由單個或多個單元格組成
grid-auto-flow 決定網(wǎng)格的默認放置順序蜒秤，默認值是row, 即“先行后列”汁咏。
也可以改成column,變成“先列后行”
grid-auto-flow屬性除了設(shè)置成row和column亚斋，還可以設(shè)成row dense和column dense。這兩個值主要用于攘滩，某些項目指定位置以后帅刊，剩下的項目怎么自動放置。并且盡量填滿空格
justify-items屬性設(shè)置單元格內(nèi)容的水平位置（左中右）
align-items屬性設(shè)置單元格內(nèi)容的垂直位置（上中下）
place-items是align-items和justify-items的合并簡寫形式
justify-content 屬性是整個內(nèi)容區(qū)域在容器里面的水平位置（左中右）
align-content 屬性是整個內(nèi)容區(qū)域的垂直位置（上中下）漂问。
place-content 是align-content屬性和justify-content屬性的合并簡寫形式赖瞒。
設(shè)置單元格內(nèi)容的水平和垂直位置
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
設(shè)置整個內(nèi)容區(qū)域在容器里面的水平和垂直位置
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
grid-auto-columns 指定瀏覽器自動創(chuàng)建的多余網(wǎng)格的列寬
grid-auto-rows指定瀏覽器自動創(chuàng)建的多余網(wǎng)格的行高
grid-template是grid-template-columns、grid-template-rows和grid-template-areas這三個屬性的合并簡寫形式蚤假。
grid是grid-template-rows栏饮、grid-template-columns、grid-template-areas磷仰、 grid-auto-rows袍嬉、grid-auto-columns、grid-auto-flow這六個屬性的合并簡寫形式灶平。
項目屬性
項目的位置是可以指定的伺通，具體方法就是指定項目的四個邊框，分別定位在哪根網(wǎng)格線
grid-column-start 項目左邊框所在的垂直網(wǎng)格線
grid-column-end 右邊框所在的垂直網(wǎng)格線
grid-row-start 上邊框所在的水平網(wǎng)格線
grid-row-end 下邊框所在的水平網(wǎng)格線
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: header-start; // 屬性值可以是網(wǎng)格線名字
grid-row-start: span 2; // 屬性值可以使用span關(guān)鍵字逢享，表示“跨越” 即左右邊框（上下邊框）之間跨越多少個網(wǎng)格
// 如果產(chǎn)生了項目的重疊罐监，則使用z-index屬性指定項目的重疊順序
grid-column grid-column-start和grid-column-end的合并簡寫形式
grid-row grid-row-start屬性和grid-row-end的合并簡寫形式。
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
斜杠以及后面的部分可以省略拼苍，默認跨越一個網(wǎng)格笑诅。
.item-1 {
grid-column: 1;
grid-row: 1;
}
// 上面代碼中，項目item-1占據(jù)左上角第一個網(wǎng)格疮鲫。
grid-areagrid-area屬性指定項目放在哪一個區(qū)域吆你。
.item-1 {
grid-area: e; // 1號項目位于e區(qū)域
}
grid-area屬性還可用作grid-row-start、grid-column-start俊犯、grid-row-end妇多、grid-column-end的合并簡寫形式，直接指定項目的位置燕侠。
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
justify-self 設(shè)置單元格內(nèi)容的水平位置（左中右）跟justify-items屬性的用法完全一致者祖，但只作用于單個項目。
align-self 屬性設(shè)置單元格內(nèi)容的垂直位置（上中下）绢彤，跟align-items屬性的用法完全一致七问，也是只作用于單個項目。
place-self是align-self屬性和justify-self屬性的合并簡寫形式茫舶。
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
place-self: <align-self> <justify-self>;
如果省略第二個值械巡，place-self屬性會認為這兩個值相等
