CSS Grid 佈局：構(gòu)建強(qiáng)大且靈活的網(wǎng)站佈局

核心要點(diǎn)

• CSS Grid 佈局提供了一種更強(qiáng)大、更靈活的方式來創(chuàng)建複雜的網(wǎng)站佈局，無需使用諸如 inline 和 float 之類的屬性或單獨(dú)的網(wǎng)格系統(tǒng)樣式表。
• 目前，只有 IE 10 和 Edge 支持 CSS Grid 佈局，但可以通過 Chrome 和 Firefox 中的特定標(biāo)誌或使用 polyfill 來啟用它。
• CSS Grid 佈局使用稱為 “fr” 的度量單位、線條、軌道、單元格和區(qū)域來定義網(wǎng)頁上元素的佈局。
• CSS Grid 佈局允許完全分離標(biāo)記和佈局，使 CSS 更易於維護(hù)，並為設(shè)計(jì)提供了無限的可能性。

在創(chuàng)建複雜的網(wǎng)站時(shí)，網(wǎng)格至關(guān)重要?，F(xiàn)代網(wǎng)頁設(shè)計(jì)中網(wǎng)格的重要性從眾多實(shí)現(xiàn)網(wǎng)格系統(tǒng)以加快開發(fā)速度的框架數(shù)量中可見一斑。

隨著 CSS Grid 佈局規(guī)範(fàn)的引入，您無需再包含單獨(dú)的樣式表即可使用網(wǎng)格系統(tǒng)。另一個(gè)優(yōu)點(diǎn)是，您無需再依賴 inline 和 float 等屬性來佈置網(wǎng)頁上的元素。在本教程中，我們將介紹網(wǎng)格系統(tǒng)的基礎(chǔ)知識(shí)，並創(chuàng)建一個(gè)基本的博客佈局。

瀏覽器支持

目前，只有 IE 10 和 Edge 支持 Grid 佈局——您還不能在商業(yè)網(wǎng)站上使用它。

它可以通過 chrome://flags 中的 “實(shí)驗(yàn)性 Web 平臺(tái)功能” 標(biāo)誌在 Chrome 中啟用。您可以使用 layout.css.grid.enabled 標(biāo)誌在 Firefox 中啟用它。

另一種選擇是使用 polyfill。確實(shí)存在 CSS Grid Polyfill！使用上述各種選項(xiàng)，您可以在 Grid 佈局仍處於起步階段時(shí)開始試驗(yàn)並儘可能多地了解它。

注意：Internet Explorer 目前已實(shí)現(xiàn)舊版本的規(guī)範(fàn)。不幸的是，這意味著它與最新規(guī)範(fàn)並不完全兼容。在學(xué)習(xí)本教程中的示例時(shí)，建議您使用啟用了相應(yīng)標(biāo)誌的 Chrome 或 Firefox。

網(wǎng)格系統(tǒng)術(shù)語

在佈置元素方面，CSS 網(wǎng)格系統(tǒng)類似於表格。但是，它更加強(qiáng)大和靈活。在本節(jié)中，我將討論一些在使用網(wǎng)格時(shí)需要注意的術(shù)語：

fr 單位：此單位用於指定可用空間的一部分。它旨在與 grid-rows 和 grid-columns 一起使用。根據(jù)規(guī)範(fàn)——

分配分?jǐn)?shù)空間發(fā)生在所有“長度”或基於內(nèi)容的行和列大小達(dá)到其最大值之後。

線條：線條定義其他元素的邊界。它們垂直和水平運(yùn)行。在下圖中，有四條垂直線和四條水平線。

軌道：軌道是平行線之間的空間。在下圖中，有三條垂直軌道和三條水平軌道。

單元格：單元格是網(wǎng)格的基本構(gòu)建塊。在下圖中，共有九個(gè)單元格。

區(qū)域：區(qū)域是一個(gè)矩形形狀，具有任意數(shù)量的單元格。因此，軌道 是一個(gè) 區(qū)域，單元格 也是一個(gè) 區(qū)域。

在網(wǎng)格中定位元素

讓我們從基礎(chǔ)開始。在本節(jié)中，我將教您如何使用網(wǎng)格將元素定位到特定位置。要使用 CSS Grid 佈局，您需要一個(gè)父元素和一個(gè)或多個(gè)子元素。為了演示，我們將使用以下標(biāo)記作為我們的網(wǎng)格系統(tǒng)：

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

完成標(biāo)記後，您需要在父元素上應(yīng)用 display: grid 或 display: inline-grid 以及其他樣式，如下所示：

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

grid-template-columns 和 grid-template-rows 屬性用於指定各種行和列的寬度。在上面的示例中，我定義了五列。 10px 列充當(dāng)槽，用於在元素之間提供所需的間距。第一列寬度為 200px。第三列佔(zhàn)據(jù)剩餘空間的 0.3 部分。類似地，第五列佔(zhàn)據(jù)剩餘空間的 0.7 部分。

對於 grid-template-rows 中的第一行使用 auto 允許該行根據(jù)其內(nèi)部的內(nèi)容進(jìn)行擴(kuò)展。 20px 行充當(dāng)槽。

此時(shí)，元素緊密地排列在一起，如下面的演示所示。 (此處省略CodePen演示鏈接)

觀察到元素 B 位於我們計(jì)劃用作槽的第二列中。如果您沒有指定網(wǎng)格內(nèi)子元素的位置，瀏覽器會(huì)將一個(gè)元素放在每個(gè)單元格中，直到第一行完全填充，其餘元素然後進(jìn)入下一行。這就是我們在第二行剩下四個(gè)備用列的原因。

要將元素移動(dòng)到網(wǎng)格中的特定單元格，您需要在 CSS 中指定它們的位置。在解釋如何使用網(wǎng)格系統(tǒng)移動(dòng)元素之前，請查看下圖。 (此處省略圖片鏈接)

在本例中，我們將使用“基於線條的放置”?；毒€條的放置意味著我們的網(wǎng)格系統(tǒng)中的線條將充當(dāng)放置和限制元素的指南。讓我們以元素 B 為例。在水平方向上，它從第 3 列線開始，到第 4 列線結(jié)束。在垂直軸上，它位於第 1 行線和第 2 行線之間。

我們使用 grid-column-start 來指定元素的起始垂直線。在這種情況下，它將設(shè)置為 3。 grid-column-end 指示元素的結(jié)束垂直線。在這種情況下，此屬性將等於 4。相應(yīng)的行值也將類似地設(shè)置。

考慮到以上所有內(nèi)容，要將元素 B 移動(dòng)到第二個(gè)單元格，您將使用以下 CSS：

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

類似地，要將元素 F 移動(dòng)到第六個(gè)單元格，您將使用以下 CSS：

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

在對 CSS 進(jìn)行這些更改後，元素應(yīng)該像此演示中一樣正確地間隔開。 (此處省略CodePen演示鏈接)

創(chuàng)建基本佈局

現(xiàn)在是時(shí)候創(chuàng)建一個(gè)基本的博客佈局了。該博客將具有頁眉、頁腳、側(cè)邊欄和兩個(gè)用於實(shí)際內(nèi)容的部分。讓我們從標(biāo)記開始：

.element-b {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

請記住，標(biāo)記中元素的順序不會(huì)影響元素在網(wǎng)頁上的位置。只要您不更改 CSS，您就可以在標(biāo)記中將頁腳放在頁眉上方，而網(wǎng)頁上元素的位置不會(huì)改變。當(dāng)然，我不建議這樣做。關(guān)鍵是——您的標(biāo)記將不再?zèng)Q定元素的位置。

我們現(xiàn)在要做的就是確定各種元素的 grid-row-end 等屬性的值。就像在最後一個(gè)示例中一樣，我們將使用網(wǎng)格圖來確定所有網(wǎng)格屬性的值。 (此處省略圖片鏈接)

如上圖所示，頁眉從第 1 列線到第 4 列線，從第 1 行線到第 2 行線。這應(yīng)該如下所示：

.element-f {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
}

類似地，“額外內(nèi)容”從第 3 列線到第 4 列線，從第 5 行線到第 6 行線。因此，CSS 將是：

<div class="grid-container">
  <div class="grid-element header">Header</div>
  <div class="grid-element sidebar">Sidebar</div>
  <div class="grid-element main">Main Content</div>
  <div class="grid-element extra">Extra Info</div>
  <div class="grid-element footer">Footer</div>
</div>

現(xiàn)在也可以輕鬆確定所有其他元素的網(wǎng)格屬性。查看 CodePen 演示並試驗(yàn)各種網(wǎng)格值，以更好地了解基於線條的放置。 (此處省略CodePen演示鏈接)

結(jié)論

CSS 網(wǎng)格佈局規(guī)範(fàn)使我們能夠輕鬆創(chuàng)建複雜的佈局。我們需要編寫的 CSS 更簡單、更易於維護(hù)。在設(shè)計(jì)中創(chuàng)建複雜佈局時(shí)，我們不再需要使用 float 或其他此類屬性。另一個(gè)巨大的優(yōu)勢是標(biāo)記和佈局的完全分離。使用 CSS Grid 佈局，可能性是無限的。

如果您對本教程有任何疑問，請?jiān)谠u論中告訴我。

關(guān)於 CSS Grid 佈局的常見問題

CSS Grid 佈局與其他 CSS 佈局方法有何不同？

CSS Grid 佈局是一個(gè)二維佈局系統(tǒng)，與其他 CSS 佈局方法（如 Flexbox，它是一維的）不同。這意味著使用 CSS Grid，您可以同時(shí)控制水平和垂直佈局，而其他方法則無法做到這一點(diǎn)。它旨在處理更複雜的設(shè)計(jì)和大型佈局。它也更靈活、更強(qiáng)大，允許更具創(chuàng)意和精細(xì)的設(shè)計(jì)。

如何開始使用 CSS Grid 佈局？

要開始使用 CSS Grid 佈局，您需要將元素的 display 屬性設(shè)置為 grid 或 inline-grid。這使得元素成為網(wǎng)格容器，其子元素成為網(wǎng)格項(xiàng)目。然後，您可以使用各種網(wǎng)格屬性來定義網(wǎng)格的佈局和網(wǎng)格項(xiàng)目的位置。

我可以將 CSS Grid 佈局與其他 CSS 佈局方法一起使用嗎？

是的，CSS Grid 佈局可以與其他 CSS 佈局方法結(jié)合使用。例如，您可以將 Flexbox 用於網(wǎng)站的組件，將 CSS Grid 用於整體佈局。這使您可以利用每種佈局方法的優(yōu)勢。

如何使用 CSS Grid 佈局創(chuàng)建網(wǎng)格？

要使用 CSS Grid 佈局創(chuàng)建網(wǎng)格，您首先需要通過將元素的 display 屬性設(shè)置為 grid 或 inline-grid 來定義網(wǎng)格容器。然後，您可以使用 grid-template-columns 和 grid-template-rows 屬性來定義網(wǎng)格中列和行的數(shù)量和大小。

如何將項(xiàng)目放置在網(wǎng)格上？

您可以使用 grid-column 和 grid-row 屬性將項(xiàng)目放置在網(wǎng)格上。這些屬性允許您指定項(xiàng)目的起始線和結(jié)束線，從而有效地將其放置在網(wǎng)格的特定單元格或單元格中。

什麼是網(wǎng)格線和網(wǎng)格軌道？

在 CSS Grid 佈局中，網(wǎng)格線是構(gòu)成網(wǎng)格結(jié)構(gòu)的分隔線。它們的編號(hào)從 1 開始，行號(hào)從上到下、從左到右遞增。網(wǎng)格軌道是兩條相鄰網(wǎng)格線之間的空間，可以是列或行。

CSS Grid 佈局中的 fr 單位是什麼？

CSS Grid 佈局中的 fr 單位代表“分?jǐn)?shù)”。它表示網(wǎng)格容器中可用空間的一部分。例如，如果您有一個(gè)包含三列的網(wǎng)格，並將一列的寬度設(shè)置為1fr，而另外兩列設(shè)置為2fr，則第一列將佔(zhàn)據(jù)可用空間的三分之一，而另外兩列將各佔(zhàn)據(jù)三分之一。

如何使網(wǎng)格具有響應(yīng)性？

要使網(wǎng)格具有響應(yīng)性，您可以將媒體查詢與 grid-template-columns 和 grid-template-rows 屬性結(jié)合使用。您還可以將 auto-fill 和 auto-fit 關(guān)鍵字與 repeat 函數(shù)一起使用，以根據(jù)視口的尺寸自動(dòng)調(diào)整列和行的數(shù)量和大小。

我可以在網(wǎng)格中嵌套網(wǎng)格嗎？

是的，您可以在 CSS Grid 佈局中嵌套網(wǎng)格。這意味著您可以使網(wǎng)格項(xiàng)目本身成為網(wǎng)格容器，從而創(chuàng)建複雜的嵌套佈局。

所有瀏覽器都支持 CSS Grid 佈局嗎？

所有現(xiàn)代瀏覽器（包括 Chrome、Firefox、Safari 和 Edge）都支持 CSS Grid 佈局。但是，Internet Explorer 不支持它。因此，務(wù)必為使用不受支持瀏覽器的用戶提供備用佈局。

請注意，由於我無法訪問外部網(wǎng)站和圖片，我無法直接顯示圖片。 請確保將圖片鏈接正確地添加到你的最終輸出中。

以上是引入CSS網(wǎng)格佈局的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！