[[437778]]

網(wǎng)格布局是由一系列水平及垂直的線構(gòu)成的一種布局模式，使用網(wǎng)格，我們能夠?qū)⒃O(shè)計(jì)元素進(jìn)行排列，幫助我們?cè)O(shè)計(jì)一系列具有固定位置以及寬度的元素的頁(yè)面，使我們的網(wǎng)站頁(yè)面更加統(tǒng)一。

一個(gè)網(wǎng)格通常具有許多的「列(column)與行(row)」，以及行與行、列與列之間的間隙，這個(gè)間隙一般被稱為「溝槽(gutter)」。

一、定義一個(gè)網(wǎng)格

我們可以將 display 屬性設(shè)為 grid 來(lái)定義一個(gè)網(wǎng)格。與彈性盒子一樣，將父容器改為網(wǎng)格布局后，他的直接子項(xiàng)會(huì)變?yōu)榫W(wǎng)格項(xiàng)。

.container { 
  display: grid; 
} 

1.1 設(shè)置列(column)與行(row)

grid-template-columns 用于設(shè)置列，grid-template-rows 用于設(shè)置行。

.container { 
  display: grid; 
  grid-template-columns: 100px 200px; 
} 

這里我們創(chuàng)建了兩列，寬度分別為 100px和200px。當(dāng)然，這里可以使用任何長(zhǎng)度單位以及百分比。

grid-template 是 grid-template-rows 和 grid-template-columns 的簡(jiǎn)寫，例如：grid-template: 50px 50px / 100px;會(huì)創(chuàng)建兩個(gè) 50px 高的行以及一個(gè)100px寬的列。

1.1.1 使用 fr 單位

除了長(zhǎng)度和百分比，我們也可以用fr這個(gè)單位來(lái)靈活地定義網(wǎng)格的行與列的大小。這個(gè)單位表示了可用空間的一個(gè)比例，類似 flex 布局的 flex-grow / flex-shrink。

.container { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
} 

上面我們創(chuàng)建了等分的兩列。如果希望兩列的比例是 1:2，可以這么設(shè)置：

.container { 
  display: grid; 
  grid-template-columns: 1fr 2fr; 
} 

另外，fr可以與一般的長(zhǎng)度單位混合使用，比如grid-template-columns: 100px 1fr 2fr的結(jié)果就是第一列寬度是 100px，剩下的兩列會(huì)根據(jù)去掉 100px 后的可用空間按比例 1: 2 來(lái)分配。

1.1.2 重復(fù)設(shè)置列 / 行

我們可以使用repeat函數(shù)來(lái)重復(fù)創(chuàng)建具有某些寬度配置的列。如果要?jiǎng)?chuàng)建多個(gè)等寬列，可以用這么寫：

.container { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
} 

傳入repeat函數(shù)的第一個(gè)參數(shù)表明了后續(xù)列寬配置要重復(fù)多少次，而第二個(gè)參數(shù)表示需要重復(fù)的配置，這個(gè)配置還可以具有多個(gè)長(zhǎng)度設(shè)定，舉個(gè)例子：repeat(2, 100px 200px)會(huì)得到這樣的效果：

1.1.3 自動(dòng)填充

某些情況下，我們需要給網(wǎng)格創(chuàng)建很多列來(lái)填滿整個(gè)容器，而容器的寬度是可變的，也就沒辦法確定 repeat 的次數(shù)了，這時(shí)可以使用 repeat 函數(shù)中的關(guān)鍵字auto-fill來(lái)實(shí)現(xiàn)這個(gè)效果。

.container { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, 150px); 
} 

可以看到在 500px 寬度的容器上創(chuàng)建了三個(gè)150px的列，剩余的 50px 不足以再創(chuàng)建一列，所以第四個(gè)元素就被放置到了第二行。

1.1.4 minmax() 函數(shù)

我們可以使用 minmax函數(shù)設(shè)置一個(gè)范圍。

.container { 
  display: grid; 
  grid-template-columns: 100px minmax(100px, 300px) 100px; 
} 

1.2 網(wǎng)格間隙

使用column-gap屬性來(lái)定義列間隙;使用row-gap來(lái)定義行間隙;使用gap可以同時(shí)設(shè)定兩者。

.container { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, 150px); 
  gap: 10px 20px; 
} 

*gap屬性曾經(jīng)有一個(gè)grid-前綴，不過后來(lái)的標(biāo)準(zhǔn)進(jìn)行了修改，目的是讓他們能夠在不同的布局方法中都能起作用。盡管現(xiàn)在這個(gè)前綴不會(huì)影響語(yǔ)義，但為了代碼的健壯性，可以把兩個(gè)屬性都寫上。

另外，雖然 gap 屬性在 grid 布局的兼容性挺好的，但在 flex 布局的兼容性目前看起來(lái)還不行：

二、放置元素

2.1 基于線的放置元素

我們的網(wǎng)格中有許多的分隔線，我們可以根據(jù)這些分割線來(lái)放置元素：

• grid-column-start 開始的列網(wǎng)格線
• grid-column-end結(jié)束的列網(wǎng)格線
• grid-row-start開始的行網(wǎng)格線
• grid-row-end結(jié)束的列網(wǎng)格線

我們還可以使用 grid-column 、grid-row同時(shí)指定開始和結(jié)束的線。需要注意的是，開始和結(jié)束的線的序號(hào)要用 / 分開。

.container { 
  display: grid; 
  grid-template-columns: 100px 400px; 
  grid-template-rows: 50px 150px 50px; 
  gap: 10px 
} 
 
.header { 
  grid-column: 1 / 3; 
} 
 
.sidebar { 
  grid-column: 1 / 2; 
} 
 
.content { 
  grid-column: 2 / 3; 
} 
 
.footer { 
  grid-column: 1 / 3; 
} 

我們還可以使用負(fù)數(shù)來(lái)指定分隔線，-n就代表倒數(shù)第n 條網(wǎng)格線。有時(shí)候我們不好確定列數(shù)，但又想定位到最后一列，這就可以考慮使用負(fù)數(shù)網(wǎng)格線了，例如上面的 header 可以這么寫：

.header { 
  grid-column: 1 / -1; 
} 

2.1.1 使用 span

除了使用開始和結(jié)束的分隔線來(lái)指定位置，我們還可以使用 span 來(lái)指定元素占的列數(shù) / 行數(shù)：

.header { 
  grid-column: 1 / span 2; 
} 
 
// 這么寫也行 
.header { 
  grid-column: span 2 / -1; 
} 

效果跟上圖一樣。

2.1.2 使用 grid-area

我們還可以使用 grid-area 來(lái)一次性指定所有的行/列序號(hào)： / / / ，也就是先指定開始坐標(biāo)的行/列序號(hào)，再指定結(jié)束坐標(biāo)的行/列序號(hào)。

.header { 
  grid-area: 1 / 1 / 2 / 3; 
} 

2.2 使用grid-tempate-areas放置元素

另一種放置元素的方式是用grid-template-areas屬性，并且要命名一些元素并在屬性中使用這些名字作為一個(gè)區(qū)域。

grid-template-areas屬性的使用規(guī)則如下：

• 需要填滿網(wǎng)格的每個(gè)格子
• 對(duì)于某個(gè)橫跨多個(gè)格子的元素，重復(fù)寫上那個(gè)元素grid-area屬性定義的區(qū)域名字
• 所有名字只能出現(xiàn)在一個(gè)連續(xù)的區(qū)域，不能在不同的位置出現(xiàn)
• 一個(gè)連續(xù)的區(qū)域必須是一個(gè)矩形
• 使用.符號(hào)，讓一個(gè)格子留空

.container { 
  display: grid; 
  grid-template-columns: 100px 400px; 
  grid-template-rows: 50px 150px 50px; 
  grid-template-areas:  
    "header  header" 
    "sidebar content" 
    "footer  footer"; 
  gap: 10px 
} 
 
.header { 
  grid-area: header; 
} 
 
.sidebar { 
  grid-area: sidebar; 
} 
 
.content { 
  grid-area: content; 
} 
 
.footer { 
  grid-area: footer; 
}  

如果想把 sidebar 延伸到底部，只需要把 grid-template-areas 改成這樣：

.container { 
  // ... 
  grid-template-areas:  
    "header  header" 
    "sidebar content" 
    "sidebar  footer"; 
} 

效果如下：

通過命名的方式來(lái)放置元素是一種非常直觀的方式，你在CSS中看到的就是實(shí)際會(huì)出現(xiàn)的排版效果了。

三、顯式網(wǎng)格與隱式網(wǎng)格

顯式網(wǎng)格是我們用grid-template-columns或 grid-template-rows 屬性創(chuàng)建的，而隱式網(wǎng)格則是當(dāng)「網(wǎng)格項(xiàng)被放到已定義的網(wǎng)格外」或「網(wǎng)格項(xiàng)的數(shù)量多于網(wǎng)格的數(shù)量」時(shí)才會(huì)自動(dòng)生成。

假設(shè)現(xiàn)在我們定義一個(gè) 1 行x 2 列的寬高都為 100px 的網(wǎng)格容器，并在其中放置了 a 和 b 兩個(gè)網(wǎng)格項(xiàng)：

如果我們把網(wǎng)格項(xiàng) a 和 b 放置到已定義的網(wǎng)格之外的話：

.a { 
  grid-column: 3; 
} 
 
.b { 
  grid-row: 2; 
} 

可以看到比之前定義的網(wǎng)格多了一些，而這些多出來(lái)的的網(wǎng)格就是隱式網(wǎng)格。另外，不僅網(wǎng)格多了，網(wǎng)格線也多了，列網(wǎng)格線 4 以及行網(wǎng)格線 3 都是自動(dòng)生成的隱式網(wǎng)格線。

3.1 給隱式網(wǎng)格設(shè)置大小

上圖的 a 和 b 有點(diǎn)區(qū)別是，網(wǎng)格 a 寬度自動(dòng)鋪滿了容器，而網(wǎng)格 b 的高度則是內(nèi)容的高度，這是默認(rèn)行為。我們可以給網(wǎng)格容器設(shè)置 grid-auto-rows 和 grid-auto-columns 屬性來(lái)指定隱式網(wǎng)格的大?。?/p>

.container { 
  grid-auto-rows: 100px; 
  grid-auto-columns: 100px; 
} 

現(xiàn)在隱式網(wǎng)格的大小也都是 100px * 100px 了。

3.2 自動(dòng)放置

上面提過，當(dāng)網(wǎng)格項(xiàng)的數(shù)量多于網(wǎng)格的數(shù)量時(shí)也會(huì)自動(dòng)生成隱式網(wǎng)格，默認(rèn)情況下元素會(huì)逐行放置，不夠空間的話再生成新的行。我們可以通過 grid-auto-flow 屬性來(lái)修改這個(gè)行為。

例如現(xiàn)在有 3 x 3 的網(wǎng)格容器，a 、b都占兩列，默認(rèn)情況下由于 b 在第一行不夠空間，最終會(huì)放到第二行，然后 c 在 b 后面。

如果修改成grid-auto-flow: column，會(huì)逐列放置元素，此時(shí) c 會(huì)被放在第三行：

如果修改成grid-auto-flow: dense，則會(huì)在 row 的基礎(chǔ)上填充前面網(wǎng)格留下來(lái)的空白：

還有column dense之類的值，具體可以去看 MDN: grid-auto-flow

四、調(diào)整對(duì)齊方式

下面的例子都基于這個(gè)網(wǎng)格容器：

.container { 
  display: grid; 
  grid-template-columns: repeat(2, 100px); 
  grid-template-rows: repeat(2, 50px); 
  gap: 10px 
} 

4.1justify-items

沿行軸對(duì)齊網(wǎng)格項(xiàng)。

start

end

center

4.2align-items

沿列軸對(duì)齊網(wǎng)格項(xiàng)。

start

end

center

4.3justify-content

如果網(wǎng)格容器的尺寸比整個(gè)網(wǎng)格內(nèi)容的大，這時(shí)候就可以使用 justify-content 或 align-content 來(lái)調(diào)整網(wǎng)格內(nèi)容的對(duì)齊了。具體就參考 flex 布局吧。

start

end

center

space-between

space-around

space-evenly

4.4align-content

參考上面的吧

五、其他

最近在實(shí)現(xiàn)一個(gè)兩欄布局的時(shí)候用了 grid 布局，但效果看起來(lái)有點(diǎn) bug，這里簡(jiǎn)單分享一下。

首先假設(shè) html 和 css 長(zhǎng)這樣：

<div class="container"> 
  <div></div> 
  <div>abcdefg</b> 
</div> 

.container { 
  display: grid; 
  grid-template-columns: 100px 1fr; 
  gap: 10px; 
  width: 150px; 
  border: 2px solid red; 
} 

<div class="container"> 
  <div></div> 
  <div width=100> 
   <div overflow> 
     <pre>123456789</pre> 
   </div> 
  </div> 
</div>