介紹

CSS 網(wǎng)格是一個(gè)用于 web 的 二維布局系統(tǒng)。利用網(wǎng)格，你可以把內(nèi)容按照行與列的格式進(jìn)行排版。另外，網(wǎng)格還能非常輕松地實(shí)現(xiàn)一些復(fù)雜的布局。

什么是網(wǎng)格布局？

網(wǎng)格是由一系列水平及垂直的線構(gòu)成的一種布局模式。根據(jù)網(wǎng)格，提供了帶有行和列的基于網(wǎng)格的布局系統(tǒng)，它使網(wǎng)頁(yè)設(shè)計(jì)變得更加容易，而無(wú)需使用浮動(dòng)和定位。

給<div>這類塊狀元素的display屬性設(shè)置為grid來(lái)定義一個(gè)網(wǎng)絡(luò)。聲明一個(gè)塊級(jí)的網(wǎng)格。
給<span>這類內(nèi)聯(lián)元素的display屬性設(shè)置為inline-grid來(lái)定義一個(gè)網(wǎng)絡(luò)。聲明一個(gè)內(nèi)聯(lián)級(jí)的網(wǎng)格

概念介紹

網(wǎng)格容器（Grid Container）

當(dāng)一個(gè)元素的屬性設(shè)置為display：grid時(shí)，它是所有網(wǎng)格項(xiàng)（Grid Items）的直接父元素。在下面示例中container就是網(wǎng)格容器。

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

網(wǎng)格項(xiàng)（Grid Item）

網(wǎng)格容器的子節(jié)點(diǎn)元素。這里 item元素都是網(wǎng)格項(xiàng)，但是sub-item不包含其中。

<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

網(wǎng)格線（Gird Line）

分界線構(gòu)成了網(wǎng)格的結(jié)構(gòu)。它們可以是垂直的("列網(wǎng)格線")也可以是水平的("行網(wǎng)格線")，并且位于一行或一列的任一側(cè)。圖中的紅色的線。

網(wǎng)格軌道（Grid Track）

兩個(gè)相鄰網(wǎng)格線之間的空間。你可以把它們想象成網(wǎng)格的列或行。圖中的紅色和藍(lán)色的部分。

紅色：第三行和第四行網(wǎng)線之間的網(wǎng)格軌道。
藍(lán)色：第三列和第四列網(wǎng)線之間的網(wǎng)格軌道。

網(wǎng)格單元格（Grid Cell）

兩個(gè)相鄰的行網(wǎng)格線和兩個(gè)相鄰的列網(wǎng)格線之間的空間。圖中的紅色部分。

是行網(wǎng)格線line 2、line 3 與列網(wǎng)格線line 2、 line 3之間的網(wǎng)格單元格。

網(wǎng)格區(qū)域（Grid Area）

網(wǎng)格區(qū)域?yàn)樗臈l網(wǎng)格線所包圍的總空間。網(wǎng)格區(qū)域可以由任何數(shù)量的網(wǎng)格單元組成。

?
?

創(chuàng)建一個(gè)網(wǎng)格布局

.css
#content3{
    margin-top: 10px;
    padding: 0px;
    border: 5px solid black;    
    display: grid;
}

效果：

注意：與彈性盒子不同的是，在定義網(wǎng)格后，網(wǎng)頁(yè)并不會(huì)馬上發(fā)生變化。

因?yàn)?code>display: grid的聲明只創(chuàng)建了一個(gè)只有一列的網(wǎng)格，所以你的子項(xiàng)還是會(huì)像正常布局流那樣從上而下一個(gè)接一個(gè)的排布。

為了讓我們的容器看起來(lái)更像一個(gè)網(wǎng)格，需要使用一些屬性，在Grid布局中，所有相關(guān)CSS屬性正好分為兩撥，一撥作用在grid容器上，還有一撥作用在grid子項(xiàng)上。

如圖：

這些屬性理解并不難，主要是比較多，熟練以后就好了。

?
?

屬性 `grid-template-columns`、`grid-template-rows`、

grid-template-columns：定義網(wǎng)格線的名稱和網(wǎng)格軌道的尺寸大小?；?列的維度。
grid-template-rows：定義網(wǎng)格線的名稱和網(wǎng)格軌道的尺寸大小。基于行的維度。

使用 grid-template-columns、grid-template-rows 創(chuàng)建的網(wǎng)格叫做 顯式網(wǎng)格。

語(yǔ)法：

grid-template-columns/rows = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage> )                

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<track-breadth> = 
  <length-percentage>  |
  <flex>               |
  min-content          |
  max-content          |
  auto                 

<inflexible-breadth> = 
  <length-percentage>  |
  min-content          |
  max-content          |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>  

<fixed-breadth> = 
  <length-percentage>

語(yǔ)法取值：

關(guān)鍵字
grid-template-columns: none;

<track-list> values
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

 <auto-track-list> values
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

Global values 
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;

取值：

<length>：非負(fù)值的長(zhǎng)度大小。
<percentage>：非負(fù)值且相對(duì)于網(wǎng)格容器的百分比值。
<flex>：非負(fù)值，用單位 fr 來(lái)定義網(wǎng)格軌道大小的彈性系數(shù)。網(wǎng)格軌道會(huì)按比例分配剩余的可用空間（除去非彈性項(xiàng)后剩余的空間）。
max-content：是一個(gè)用來(lái)表示以網(wǎng)格項(xiàng)的最大的內(nèi)容來(lái)占據(jù)網(wǎng)格軌道的關(guān)鍵字。
min-content：是一個(gè)用來(lái)表示以網(wǎng)格項(xiàng)的最大的最小內(nèi)容來(lái)占據(jù)網(wǎng)格軌道的關(guān)鍵字。
<line-name>：任意定義網(wǎng)格線的名稱 ?？梢杂?個(gè)名字，或多個(gè)名字。使用屬性值subgrid時(shí)，可以組合使用。
none：這個(gè)關(guān)鍵字表示不明確的網(wǎng)格。所有的列和其大小都將由grid-auto-columns 屬性隱式的指定。
auto：如果該網(wǎng)格軌道為最大時(shí)，該屬性等同于 max-content ，為最小時(shí)，則等同于 min-content。
- 網(wǎng)格軌道大小為 auto (且只有為 auto ) 時(shí)，才可以被屬性align-content和 justify-content拉伸。
subgrid：如果你的網(wǎng)格容器本身是一個(gè)網(wǎng)格項(xiàng)（即嵌套網(wǎng)格），你可以使用此屬性來(lái)表示你希望其行/列的大小從其父項(xiàng)繼承，而不是自定義屬性。

minmax(min, max)：定義了一個(gè)長(zhǎng)寬范圍的閉區(qū)間?？捎?code><length>、<percentage>、<flex>、max/min-content、auto。
fit-content( [ <length> | <percentage> ] )：
行為表現(xiàn)為fit-content(stretch)在實(shí)踐中，這意味著盒子將使用可用空間，但永遠(yuǎn)不會(huì)超過(guò)max-content。類似于auto的計(jì)算（即minmax(auto, max-content)）。
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )：表示軌道列表的重復(fù)片段，允許以更緊湊的形式寫入大量顯示重復(fù)模式的列或行。以一種更簡(jiǎn)潔的方式去表示大量和重復(fù)列的表達(dá)式。
- autp-fill：模式填充。在網(wǎng)格容器寬度大于網(wǎng)格項(xiàng)的最小寬度總和時(shí)就會(huì)有區(qū)別。
- autp-fit：模式填充。

示例1：

.css
#content1,
#content2{
    margin-top: 10px;
    padding: 0px;
    border: 5px solid black;
    
    display: grid;  
}
#content1{
    grid-template-columns: 100px 100px 100px;
}
#content2{
    grid-template-columns: 200px 100px 200px;
}
#content3{
    grid-template-columns: 1fr 2fr 1fr;
}

效果：

示例2：repeat()

#content1{
    grid-template-columns: repeat(2,100px) repeat(2,80px) auto;
}
#content2{
    grid-template-columns:  repeat(auto-fill ,minmax(100px,1fr));
}
#content3{
    grid-template-columns:  repeat(auto-fit ,minmax(100px,1fr));
}

效果：

代碼解析：

當(dāng)屏幕寬度大于 1000px 時(shí)，可以看到auto-fill 不填滿網(wǎng)格軌道，auto-fit 填滿網(wǎng)格軌道。

repeat(2,100px) repeat(2,80px) auto：前面2列寬度都是100px，緊跟著2列寬度是80px，剩下1列寬度auto。

示例2：fit-content()

#content1{
    grid-template-columns: auto fit-content(100px) fit-content(100px);
}

效果：

?
?

屬性 `grid-auto-columns`、`grid-auto-rows`、

grid-auto-columns：指定了隱式創(chuàng)建的網(wǎng)格縱向軌道 track 的寬度。
grid-auto-rows：指定了隱式創(chuàng)建的網(wǎng)格橫向軌道 track 的寬度。

使用 grid-auto-columns、grid-auto-rows 創(chuàng)建的網(wǎng)格叫做 隱式網(wǎng)格。

簡(jiǎn)單來(lái)說(shuō)，隱式網(wǎng)格就是為了放顯式網(wǎng)格放不下的元素，瀏覽器根據(jù)已經(jīng)定義的顯式網(wǎng)格自動(dòng)生成的網(wǎng)格部分。

語(yǔ)法：

grid-auto-rows = 
  <track-size>+  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage> )                

<track-breadth> = 
  <length-percentage>  |
  <flex>               |
  min-content          |
  max-content          |
  auto                 

<inflexible-breadth> = 
  <length-percentage>  |
  min-content          |
  max-content          |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>

語(yǔ)法示例：

/* Keyword values */
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/* <length> values */
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/* <percentage> values */
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/* <flex> values */
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/* minmax() values */
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/* multiple track-size values */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-rows: inherit;
grid-auto-rows: initial;
grid-auto-rows: unset;

取值：

`<length>
一個(gè)非負(fù)的長(zhǎng)度。
<percentage>：相對(duì)于網(wǎng)格窗口塊尺寸的非負(fù) <percentage> 值。如果網(wǎng)格容器的塊尺寸是不確定的，則百分比值將被視為 auto。
<flex>：非負(fù)的、以 fr 為單位的維度指定軌道的彈性因子。每個(gè) <flex>尺寸的軌道都按其彈性因子的比例擠占剩余空間的一部分。
- 當(dāng)使用在 minmax() 符號(hào)外時(shí)，意味著最小值為 auto (例： minmax(auto, <flex>))。
max-content：關(guān)鍵詞，指明由網(wǎng)格元素中占用空間最大的那一個(gè)來(lái)決定軌道的尺寸。
min-content：關(guān)鍵詞，指明由網(wǎng)格元素中占用空間最小的那一個(gè)來(lái)決定軌道的尺寸。
minmax(min, max)：函數(shù)符號(hào)，定義一個(gè)不小于min且不大于max的尺寸范圍。
如果max比min小，則max會(huì)被忽略，函數(shù)會(huì)被用作min處理。作為最大值，<flex> 值設(shè)置了軌道的彈性因子。作為最小值，會(huì)被當(dāng)作 0 處理（或者最小內(nèi)容——當(dāng)網(wǎng)格容器指定了尺寸為最小內(nèi)容）。
auto：關(guān)鍵字，當(dāng)用來(lái)指定最大值時(shí)與最大內(nèi)容一致，當(dāng)用來(lái)指定最小值時(shí)，它表示軌道中所有網(wǎng)格元素最小尺寸中的最大值（由min-width/min-height指定）。

注意：auto 軌道尺寸（且僅有 auto 軌道尺寸）可配合align-content 和justify-content 屬性使用。

示例：

.css
#grid {
    display: grid;
    grid-template-areas: ". . ."
                         ". . .";
    grid-auto-columns: 40px;
    grid-auto-rows: 30px;
}
#item1{background-color: red;}
#item2{background-color: lime;}
#item3{background-color: orange;}

.html
<div id="grid">
        <div id="item1"></div>
        <div id="item2"></div>
        <div id="item3"></div>
      </div>

通過(guò)查看器查看效果：

無(wú)法使用repeat()。

?
?

屬性 `grid-template-areas`

網(wǎng)格區(qū)域。用于設(shè)置網(wǎng)格布局。
grid-area 屬性可以對(duì)網(wǎng)格元素進(jìn)行命名。命名的網(wǎng)格元素可以通過(guò)容器的 grid-template-areas屬性來(lái)引用。

語(yǔ)法：

grid-template-areas = 
  none       |
  <string>+

語(yǔ)法示例：

關(guān)鍵字
grid-template-areas: none;

/* <string> values */
grid-template-areas: "a b"; 一行 兩列
grid-template-areas: "a b b" 兩行 三列
                     "a c d"; 

/* Global values */
grid-template-areas: inherit;  繼承 
grid-template-areas: initial;  默認(rèn)值 
grid-template-areas: unset;  未設(shè)置

取值：

none：網(wǎng)格容器沒(méi)有定義任何的網(wǎng)格區(qū)塊 (grid areas)。
<string>+：每一個(gè)給定的字符串會(huì)生成一行，一個(gè)字符串中用空格分隔的每一個(gè)單元 (cell) 會(huì)生成一列。多個(gè)同名的，跨越相鄰行或列的單元稱為網(wǎng)格區(qū)塊 (grid area)。非矩形的網(wǎng)格區(qū)塊是無(wú)效的。

示例：

.css
.grid1{
    display: grid;
    width: 100%;
    height: 200px;
    border: 2px solid black;
    grid-template-areas: "head head head"
                         "nav  main side"
                         "nav  foot foot";
    grid-template-columns: 150px 1fr;
    grid-template-rows: 50px 1fr 30px;
}
.header1{
    grid-area: head;
    background-color: bisque;
}
.nav1{
    grid-area: nav;
    background-color: #ccc;
}
.main1{
    grid-area: main;
    background-color: darkgreen;
}
.footer1{
    grid-area: foot;
    background-color: cornsilk;
}
.side1{
    grid-area: side;
    background-color: purple;
}
.html
<section class="grid1">
    <header class="header1">頭部區(qū)域</header>
    <nav class="nav1">導(dǎo)航區(qū)域</nav>
    <main class="main1">內(nèi)容區(qū)域</main>
    <footer class="footer1">尾部區(qū)域</footer>
    <div class="side1">側(cè)邊區(qū)域</div>
</section>

效果：

通過(guò)查看器查看效果：

代碼解析：

display: grid;：設(shè)置 display 為 grid

grid-template-areas: "head head head" "nav main side" "nav foot foot";：區(qū)域劃分當(dāng)前為三行三列

grid-template-rows: 50px 1fr 30px; 、grid-template-columns: 150px 1fr;：各區(qū)域寬高設(shè)置

grid-area: xxx;：指定當(dāng)前元素所在的區(qū)域位置，從 grid-template-areas 選取值。

?
?

屬性 `grid-area`

指定網(wǎng)格元素在網(wǎng)格布局中的大小和位置，也可以對(duì)網(wǎng)格元素進(jìn)行命名。

grid-area 是以下屬性的簡(jiǎn)寫屬性：

grid-row-start：指定在哪一行開始顯示網(wǎng)格元素。
grid-column-start：指定在哪一列開始顯示網(wǎng)格元素。
grid-row-end：指定哪一行停止顯示網(wǎng)格元素，或跨越多少行。
grid-column-end：指定哪一列停止顯示網(wǎng)格元素，或跨越多少列。

grid-area：也可以理解成 Excel中單元格合并，在默認(rèn)的網(wǎng)格列表中，將哪個(gè)位置的哪幾個(gè)相鄰的單元格合并成一個(gè)單元格）

語(yǔ)法：

grid-area = 
  <grid-line> [ / <grid-line> ]{0,3}  

<grid-line> = 
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

語(yǔ)法示例：

/* Keyword values */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/* <custom-ident> values */
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/* <integer> && <custom-ident>? values */
grid-area:  4 some-grid-area;
grid-area:  4 some-grid-area / 2 another-grid-area;

/* span && [ <integer> || <custom-ident> ] values */
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

/* Global values */
grid-area: inherit;
grid-area: initial;
grid-area: unset;

取值：

auto：該關(guān)鍵字表明該屬性未指定該如何紡織網(wǎng)格項(xiàng)目。網(wǎng)格項(xiàng)目會(huì)被以默認(rèn)跨度（span）1自動(dòng)放置。
<custom-ident>：自定義關(guān)鍵字?jǐn)?shù)據(jù)類型。
<integer> && <custom-ident>?：將第 n 條網(wǎng)格基線用來(lái)給網(wǎng)格單元布置。值不能為 0。
- 如果指定的是負(fù)數(shù)，則指的是從下邊界向上邊界計(jì)算的反向順序。
- 如果提供的是 <custom-ident>，那么只有以此命名的基線才會(huì)被計(jì)算。
- 如果所命名的基線數(shù)超過(guò)了網(wǎng)格線數(shù)，為了找到該位置，所有隱式的網(wǎng)格線會(huì)被假定擁有這個(gè)命名。
span && [ <integer> || <custom-ident> ]：為網(wǎng)格單元定義一個(gè)跨度，使得網(wǎng)格單元的網(wǎng)格區(qū)域中的一條邊界遠(yuǎn)離另一條邊界線 n 條基線。
- 如果提供的是<custom-ident>，則只有以此命名的基線才會(huì)被計(jì)算。如果網(wǎng)格線不足，則假定與搜索方向?qū)?yīng)的顯式網(wǎng)格一側(cè)的所有隱式網(wǎng)格線都具有該名稱。
- 如果忽略 <integer> ，它就默認(rèn)設(shè)為 1。它的值也不能為 0。

示例1：可以簡(jiǎn)寫，也可以擴(kuò)展開寫

.wrapper {
    display: grid;
    grid-template-columns: [col-1] 100px [col-2] 100px [col-3] 100px [col-4];
    grid-auto-rows: 30px;
}
.box1 {
    grid-area: 1 / 1 / 3 / 4; 
    background-color: orange;
}
.box2 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    // grid-row-end: 4;
    background-color: red;
}
.box3 {
    grid-area: span 2 / span 1; 
    background-color: yellow;
}
.box4 {
    grid-column-start: col-1;
    grid-column-end: col-3;
    grid-area: span 1;
    background-color: lawngreen;
}

效果：

代碼解析：

grid-area: 1 / 1 / 3 / 4;：規(guī)則： grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;。
意思是：網(wǎng)格元素.box1所占的網(wǎng)格區(qū)域是，網(wǎng)格行線line1 到 line3的區(qū)域，網(wǎng)格列線從line1 到 line4的區(qū)域。

grid-area: span 2 / span 1;：意思是，網(wǎng)格元素.box3所占的網(wǎng)格區(qū)域是，從其默認(rèn)的位置開始，網(wǎng)格行上占 2行 / 網(wǎng)格列上占 1 列。

// grid-row-end: 4;：可以注釋掉，代表，網(wǎng)格元素.box2 默認(rèn)只占 1 行的網(wǎng)格區(qū)域。

grid-column-start: col-1;、grid-column-end: col-3;：意思是，網(wǎng)格元素.box4，擁有從網(wǎng)格列線 col-1 到網(wǎng)格列線 col-3 之間的網(wǎng)格區(qū)域。

grid-area: span 1;：意思是，網(wǎng)格元素.box4，只有一行。也可以不寫。

?
?

屬性 `grid-row`、`grid-column`

grid-row：用于指定網(wǎng)格元素行的開始和結(jié)束位置。
是一個(gè)簡(jiǎn)寫的屬性，其包含：
- grid-row-start
- grid-row-end
grid-column：用于指定網(wǎng)格元素列的開始和結(jié)束位置。
是一個(gè)簡(jiǎn)寫的屬性，其包含：
- grid-column-start
- grid-column-end

語(yǔ)法：

grid-column = 
  <grid-line> [ / <grid-line> ]?  

<grid-line> = 
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

語(yǔ)法示例

grid-column: auto;

/* with line numbers */
grid-column: 1;
grid-column: 1 / 3;
grid-column: 1 / span 2;

/* with line names */
grid-column: main-start;
grid-column: main-start / main-end;

/* Global values */
grid-column: inherit;
grid-column: initial;
grid-column: revert;
grid-column: revert-layer;
grid-column: unset;

示例：

.wrapper {
    display: grid;
    grid-template-columns: [col-1] 60px [col-2] 60px [col-3] 60px [col-4] 60px [col-5];
    grid-template-rows: [ro-1] 30px [ro-2] 30px [ro-3] 30px [ro-4];
}

.box1{
    background-color: red;
    grid-column: col-1 / 4;
}
.box2{
    background-color: chocolate ;
    grid-column: 1 / span 2;
}
.box3{
    background-color: green;
    grid-column: 3;
    grid-row: span 2 / 4;
}
.box4{
    background-color: palevioletred;
    grid-column: 4;
    grid-row: 1 / 4;
}
.box5{
    background-color: cadetblue;
}

效果：

代碼解析：

grid-column: col-1 / 4;：網(wǎng)格元素 .box1 占從網(wǎng)格列線col-1 到網(wǎng)格列線line4的區(qū)域。

grid-column: 1 / span 2;：網(wǎng)格元素 .box2 占從網(wǎng)格列線line1 開始，往后占 2 列的區(qū)域。

grid-row: span 2 / 4;：網(wǎng)格元素 .box3 占 2 行的區(qū)域，到網(wǎng)格行線 line4 結(jié)束。

grid-row: 1 / 4;：網(wǎng)格元素 .box4 占從網(wǎng)格行線 line1 到網(wǎng)格行線 line4 的區(qū)域。

?
?

屬性 `grid-template`

用以定義網(wǎng)格中行、列、分區(qū)。
是簡(jiǎn)寫屬性，包含一下屬性：

grid-template-rows
grid-template-columns
grid-template-areas

語(yǔ)法：

grid-template =
none                                                |
[ <'grid-template-rows'> / <'grid-template-columns'> ]  |
[ <line-names>?  <string> <track-size>?  <line-names>?  ]+ [ / <explicit-track-list> ]?

<line-names> =
'[' <custom-ident>* ']'

<track-size> =
<track-breadth>                                   |
minmax( <inflexible-breadth> , <track-breadth> )  |
fit-content( <length-percentage> )

<explicit-track-list> =
[ <line-names>?  <track-size> ]+ <line-names>?

<track-breadth> =
<length-percentage>  |
<flex>               |
min-content          |
max-content          |
auto

<inflexible-breadth> =
<length-percentage>  |
min-content          |
max-content          |
auto

<length-percentage> =
<length>      |
<percentage>

語(yǔ)法示例：

關(guān)鍵詞
grid-template: none;

為 grid-template-rows / grid-template-columns
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);

為 grid-template-areas grid-template-rows / grid-template-column
grid-template: "a a a"
               "b b b";
grid-template: "a a a" 20%
               "b b b" auto;
grid-template: [header-top] "a a a"     [header-bottom]
                 [main-top] "b b b" 1fr [main-bottom]
                            / auto 1fr auto;

/* 為全局值 */
grid-template: inherit;
grid-template: initial;
grid-template: unset;

取值：

none：關(guān)鍵詞，設(shè)上文“所簡(jiǎn)寫屬性”為none，即恢復(fù)默認(rèn)設(shè)置。行列隱式生成，grid-auto-rows與grid-auto-columns定其尺寸。
<'grid-template-rows'> / <'grid-template-columns'>：
指定grid-template-rows與grid-template-columns之值，并設(shè)grid-template-areas為none。
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?：
設(shè)grid-template-areas為列的<string>、
grid-template-columns為<explicit-track-list>（默認(rèn)為none）、
grid-template-rows為<track-size>（默認(rèn)為auto）并拼接尺寸前后所定義之行。
注意：軌道被用以與“ASCII art”（即字符畫，此處指<string>）中行列逐一視覺(jué)對(duì)齊，故<explicit-track-list>中不允許repeat()。

注意：grid可如此用，但將重置隱式網(wǎng)格屬性。使用grid(而不是grid-template)來(lái)防止這些值單獨(dú)級(jí)聯(lián)。

示例1：

.wrapper {
    display: grid;
    grid-template: repeat(2,30px) / 60px 50px 70px;
}
.wrapper div:nth-child(odd){
    background-color: red;
}

效果：

示例2：

.wrapper {
    display: grid;
    grid-template: "a a a" 30px
                   "b b b" 40px
                    / 50px 60px 70px;
}
.wrapper div:nth-child(odd){
    background-color: red;
}

效果：

代碼解析：

"a a a" 30px：設(shè)置第一行行高 30px，有 3 列；

"b b b" 40px：設(shè)置第二行行高 40px，有 3 列；

/ 50px 60px 70px;：設(shè)置列寬分別是 50px 60px 70px；

?
?

屬性 `gap`、`row-gap`、`column-gap`

用來(lái)設(shè)置網(wǎng)格行與列之間的間隙大小。

是簡(jiǎn)寫屬性

row-gap：用來(lái)設(shè)置行元素之間的間隙大??；
column-gap：用來(lái)設(shè)置列元素之間的間隙大??；

語(yǔ)法：

row-gap = 
  normal                     |
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

語(yǔ)法示例：

/* <length> values */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/* <percentage> value */
row-gap: 10%;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;

取值：

<length-percentage>：表示行之間的間隔寬度。<percentage>表示相對(duì)柵格容器的百分比。

示例：

.wrapper {
    display: grid;
    grid-template: "a a a" 30px
                   "b b c" 40px
                    / 50px 60px 70px;
    gap: 5px;
}
.wrapperr {
    display: grid;
    grid-template: "a a a" 30px
                   "b b c" 40px
                    / 50px 60px 70px;
    gap: 5px 10px;
}
.wrapperrr {
    display: grid;
    grid-template: "a a a" 30px
                   "b b c" 40px
                    / 50px 60px 70px;
    row-gap: 5px;
    column-gap: 10px;
}
.wrapper div:nth-child(odd),
.wrapperr div:nth-child(odd),
.wrapperrr div:nth-child(odd){
    background-color: red;
}

效果：

?
?

屬性 `grid-auto-flow`

控制著自動(dòng)布局算法怎樣運(yùn)作，精確指定在網(wǎng)格中被自動(dòng)布局的元素怎樣排列。

語(yǔ)法：

grid-auto-flow = 
  [ row | column ]  ||
  dense

語(yǔ)法示例：

關(guān)鍵字
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/* Global values */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;

此屬性有兩種形式：

單個(gè)關(guān)鍵字：row、column、 dense 中的一個(gè)。
兩個(gè)關(guān)鍵字：row dense 、 column dense。

取值：

row：默認(rèn)值，通過(guò)逐行填充來(lái)排列元素，在必要時(shí)增加新行。
column：通過(guò)逐列填充來(lái)排列元素，在必要時(shí)增加新列。
dense：使用一種“稠密”堆積算法，如果后面出現(xiàn)了稍小的元素，則會(huì)試圖去填充網(wǎng)格中前面留下的空白。這樣做會(huì)填上稍大元素留下的空白，但同時(shí)也可能導(dǎo)致原來(lái)出現(xiàn)的次序被打亂。
如果省略它，使用一種「稀疏」算法，在網(wǎng)格中布局元素時(shí)，布局算法只會(huì)「向前」移動(dòng)，永遠(yuǎn)不會(huì)倒回去填補(bǔ)空白。這保證了所有自動(dòng)布局元素「按照次序」出現(xiàn)，即使可能會(huì)留下被后面元素填充的空白。

示例：`row`、`column`、`dense`

#grid1 ,
#grid2,
#grid3{
    height: 100px;
    width: 150px;
    display: grid;
    grid-gap: 5px;
    grid-template: repeat(4, 1fr) / repeat(2, 1fr);
}
#grid1{
    grid-auto-flow: row;
}
#grid2{
    grid-auto-flow: column;
}
#grid3{
    grid-auto-flow: dense;
}

效果：

示例2：修改網(wǎng)格元素#item1的位置

#item1 {
    grid-row-start: 3;
}

效果：

示例3：修改網(wǎng)格元素#item4的位置

#item4 {
    grid-row-start: 3;
}

效果：

代碼解析：

分析之前要明確，網(wǎng)格元素 #item1、#itme4位置是不會(huì)挪動(dòng)的，因?yàn)槲覀兘o定了其具體的位置。

唯一會(huì)變化的只有網(wǎng)格元素#item2、#item3、#item5，然后根據(jù)空白位置以及給定的屬性分析，這些網(wǎng)格元素的變化就會(huì)一目了然了。

?
?

屬性 `grid` 終極簡(jiǎn)寫屬性...

可以用來(lái)設(shè)置以下屬性：

顯式網(wǎng)格屬性： grid-template-rows、grid-template-columns 、 grid-template-areas。
隱式網(wǎng)格屬性：grid-auto-rows、grid-auto-columns 、grid-auto-flow。
間距屬性： column-gap 、row-gap。

語(yǔ)法:

grid = 
  <'grid-template'>                                   |
  <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?  |
  [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

示例：

.container{
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}
等價(jià)
.container{  
  grid-template-areas: "header header header"
                       "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto; 
}

.container{
    grid: 200px auto / 1fr auto 1fr;
}
等價(jià)
.container{
    grid-template-rows: 200px auto;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: none;
}

.container{
    grid: column 1fr / auto;
}
等價(jià)
.container{
    grid-auto-flow: column;
    grid-auto-rows: 1fr;
    grid-auto-columns: auto;        
}

?
?

屬性 `justify-items`、`justify-self`

設(shè)置單個(gè)網(wǎng)格元素在網(wǎng)格容器中內(nèi)聯(lián)軸上對(duì)其方式。

取值：

start : 內(nèi)容在網(wǎng)格區(qū)域中左端對(duì)齊
end ：內(nèi)容在網(wǎng)格區(qū)域中右端對(duì)齊
center ：內(nèi)容在網(wǎng)格區(qū)域居中對(duì)齊
stretch ：內(nèi)容寬度占滿整個(gè)網(wǎng)格區(qū)域（默認(rèn)值）

示例1：`justify-items`

#grid1{
    justify-items: start;
}
#grid2{
    justify-items: end;
}
#grid3{
    justify-items: stretch;
}
#grid4{
    justify-items: center;
}

效果：

示例2：`justify-self`

#item1 {
    justify-self: start;
}
#item2 {
    justify-self: end;
}
#item3 {
    justify-self: center;
}
#item4 {
    justify-self: stretch;
}

效果：

?
?

屬性 `align-items`

設(shè)置單個(gè)網(wǎng)格元素在網(wǎng)格容器中縱軸上對(duì)其方式。

取值：

start : 內(nèi)容在網(wǎng)格區(qū)域中左端對(duì)齊
end ：內(nèi)容在網(wǎng)格區(qū)域中右端對(duì)齊
center ：內(nèi)容在網(wǎng)格區(qū)域居中對(duì)齊
stretch ：內(nèi)容寬度占滿整個(gè)網(wǎng)格區(qū)域（默認(rèn)值）
baseline/first baseline/last baseline：按照基線對(duì)齊。

示例1：`align-items`

#grid1{
    align-items: flex-start;
}
#grid2{
    align-items: flex-end;
}
#grid3{
    align-items: stretch;
}
#grid4{
    align-items: center;
}

效果：

示例2：`align-self`

#item1 {
    align-self: start;
}
#item2 {
    align-self: end;
}
#item3 {
    align-self: center;
}
#item4 {
    align-self: stretch;
}

效果：

?
?

屬性 `justify-content`

如果你的網(wǎng)格項(xiàng)目都是使用像px這樣的非響應(yīng)式單位來(lái)計(jì)算的，就有可能出現(xiàn)一種情況－－網(wǎng)格的總大小可能小于其網(wǎng)格容器的大小。在這種情況下，您可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對(duì)齊方式。

取值：

start：網(wǎng)格在網(wǎng)格容器中左端對(duì)齊
end：網(wǎng)格在網(wǎng)格容器中右端對(duì)齊
center：網(wǎng)格在網(wǎng)格容器中居中對(duì)齊
stretch：調(diào)整網(wǎng)格項(xiàng)的大小，使其寬度填充整個(gè)網(wǎng)格容器。
space-around：在網(wǎng)格項(xiàng)之間設(shè)置偶數(shù)個(gè)空格間隙，其最邊緣間隙大小為中間空格間隙大小的一半
space-between：在網(wǎng)格項(xiàng)之間設(shè)置偶數(shù)個(gè)空格間隙，其最邊緣沒(méi)有間隙
space-evenly：在網(wǎng)格項(xiàng)之間設(shè)置偶數(shù)個(gè)空格間隙，其最邊緣間隙與其相同

示例1：`space-around`、`space-evenly`、`space-between`

#grid1,
#grid2,
#grid3{
    height: 80px;
    width: 150px;
    display: grid;
    grid-template-areas: "a a a"
                         "a a a";
}
#grid1{
    justify-content: space-around;
}
#grid2{
    justify-content: space-evenly;
}
#grid3{
    justify-content: space-between;
}

效果：

示例2：`stretch`、`start`、`center`、`end`

#grid1{
    justify-content: start;
}
#grid2{
    justify-content: center;
}
#grid3{
    justify-content: end;
}
#grid4{
    justify-content: stretch;
}

效果：

?
?

屬性 `align-content`

取值：

start：網(wǎng)格在網(wǎng)格容器中左端對(duì)齊
end：網(wǎng)格在網(wǎng)格容器中右端對(duì)齊
center：網(wǎng)格在網(wǎng)格容器中居中對(duì)齊
stretch：調(diào)整網(wǎng)格項(xiàng)的大小，使其寬度填充整個(gè)網(wǎng)格容器。
space-around：在網(wǎng)格項(xiàng)之間設(shè)置偶數(shù)個(gè)空格間隙，其最邊緣間隙大小為中間空格間隙大小的一半
space-between：在網(wǎng)格項(xiàng)之間設(shè)置偶數(shù)個(gè)空格間隙，其最邊緣沒(méi)有間隙
space-evenly：在網(wǎng)格項(xiàng)之間設(shè)置偶數(shù)個(gè)空格間隙，其最邊緣間隙與其相同

示例1：`space-around`、`space-evenly`、`space-between`

#grid1,
#grid2,
#grid3{
    height: 80px;
    width: 150px;
    display: grid;
    grid-template-areas: "a a a"
                         "a a a";
}
#grid1{
    align-content: space-around;
}
#grid2{
    align-content: space-evenly;
}
#grid3{
    align-content: space-between;
}

效果：

示例2：`stretch`、`start`、`center`、`end`

#grid1{
    align-content: start;
}
#grid2{
    align-content: center;
}
#grid3{
    align-content: end;
}
#grid4{
    align-content: stretch;
}

效果：

?
align-items

屬性 `place-items`、`place-self`、`place-content`

語(yǔ)法：

place-items = 
  <'align-items'> <'justify-items'>?  

place-self = 
  <'align-self'> <'justify-self'>?

place-content = 
  <'align-content'> <'justify-content'>?

取值：

參考 place-items值

參考 place-self值

參考 place-content值

place-content示例：`space-around`、`space-evenly`、`space-between`

#grid1,
#grid2,
#grid3{
    height: 80px;
    width: 150px;
    display: grid;
    grid-template-areas: "a a a"
                         "a a a";
}
#grid1{
    place-content: space-around;
}
#grid2{
    place-content: space-evenly space-around;
}
#grid3{
    place-content: space-between space-evenly;
}

效果：

?
?

屬性值 `grid`與`inline-grid`的區(qū)別

grid：將對(duì)象作為網(wǎng)格容器顯示。
inline-grid：將對(duì)象作為內(nèi)聯(lián)塊級(jí)網(wǎng)格容器顯示。

一句話來(lái)描述就是當(dāng)Grid 容器沒(méi)有設(shè)置寬度大小限制時(shí)，當(dāng)display 指定為 grid 時(shí)，Grid 容器的寬度會(huì)填充父容器，當(dāng)display指定為 inline-grid 時(shí)，Grid 容器的寬度會(huì)包裹grid Item。

inline-grid效果：

grid效果：

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS - 布局 - display:grid / inline-grid - 網(wǎng)格模型布局

介紹

什么是網(wǎng)格布局？

概念介紹

網(wǎng)格容器（Grid Container）

網(wǎng)格項(xiàng)（Grid Item）

網(wǎng)格線（Gird Line）

網(wǎng)格軌道（Grid Track）

網(wǎng)格單元格（Grid Cell）

網(wǎng)格區(qū)域（Grid Area）

創(chuàng)建一個(gè)網(wǎng)格布局

屬性 grid-template-columns、grid-template-rows、

語(yǔ)法：

語(yǔ)法取值：

取值：

示例1：

示例2：repeat()

示例2：fit-content()

屬性 grid-auto-columns、grid-auto-rows、

語(yǔ)法：

語(yǔ)法示例：

取值：

示例：

屬性 grid-template-areas

語(yǔ)法：

語(yǔ)法示例：

取值：

示例：

屬性 grid-area

語(yǔ)法：

語(yǔ)法示例：

取值：

示例1：可以簡(jiǎn)寫，也可以擴(kuò)展開寫

屬性 grid-row、grid-column

語(yǔ)法：

語(yǔ)法示例

示例：

屬性 grid-template

語(yǔ)法：

語(yǔ)法示例：

取值：

示例1：

示例2：

屬性 gap、row-gap、column-gap

語(yǔ)法：

語(yǔ)法示例：

取值：

示例：

屬性 grid-auto-flow

語(yǔ)法：

語(yǔ)法示例：

此屬性有兩種形式：

取值：

示例：row、column、dense

示例2：修改 網(wǎng)格元素#item1的位置

示例3：修改 網(wǎng)格元素#item4的位置

屬性 grid 終極簡(jiǎn)寫屬性...

語(yǔ)法:

示例：

屬性 justify-items、justify-self

取值：

示例1：justify-items

示例2：justify-self

屬性 align-items

取值：

示例1：align-items

示例2：align-self

屬性 justify-content

取值：

示例1：space-around、space-evenly、space-between

示例2：stretch、start、center、end

屬性 align-content

取值：

示例1：space-around、space-evenly、space-between

示例2：stretch、start、center、end

屬性 place-items、place-self、place-content

語(yǔ)法：

取值：

place-content示例：space-around、space-evenly、space-between

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

什么是網(wǎng)格布局？

屬性 `grid-template-columns`、`grid-template-rows`、

屬性 `grid-auto-columns`、`grid-auto-rows`、

屬性 `grid-template-areas`

屬性 `grid-area`

示例1：可以簡(jiǎn)寫，也可以擴(kuò)展開寫

屬性 `grid-row`、`grid-column`

屬性 `grid-template`

屬性 `gap`、`row-gap`、`column-gap`

屬性 `grid-auto-flow`

示例：`row`、`column`、`dense`

示例2：修改網(wǎng)格元素#item1的位置

示例3：修改網(wǎng)格元素#item4的位置

屬性 `grid` 終極簡(jiǎn)寫屬性...

屬性 `justify-items`、`justify-self`

示例1：`justify-items`

示例2：`justify-self`

屬性 `align-items`

示例1：`align-items`

示例2：`align-self`

屬性 `justify-content`

示例1：`space-around`、`space-evenly`、`space-between`

示例2：`stretch`、`start`、`center`、`end`

屬性 `align-content`

示例1：`space-around`、`space-evenly`、`space-between`

示例2：`stretch`、`start`、`center`、`end`

屬性 `place-items`、`place-self`、`place-content`

place-content示例：`space-around`、`space-evenly`、`space-between`

屬性值 `grid`與`inline-grid`的區(qū)別