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

核心要點(diǎn)

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

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

隨著 CSS Grid 布局規(guī)范的引入，您無(wú)需再包含單獨(dú)的樣式表即可使用網(wǎng)格系統(tǒng)。另一個(gè)優(yōu)點(diǎn)是，您無(wú)需再依賴 inline 和 float 等屬性來(lái)布置網(wǎng)頁(yè)上的元素。在本教程中，我們將介紹網(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ī)范。不幸的是，這意味著它與最新規(guī)范并不完全兼容。在學(xué)習(xí)本教程中的示例時(shí)，建議您使用啟用了相應(yīng)標(biāo)志的 Chrome 或 Firefox。

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

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

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

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

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

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

單元格：?jiǎn)卧袷蔷W(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。第三列占據(jù)剩余空間的 0.3 部分。類似地，第五列占據(jù)剩余空間的 0.7 部分。

對(duì)于 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)入下一行。這就是我們?cè)诘诙惺Ｏ滤膫€(gè)備用列的原因。

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

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

我們使用 grid-column-start 來(lái)指定元素的起始垂直線。在這種情況下，它將設(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;
}

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

創(chuàng)建基本布局

現(xiàn)在是時(shí)候創(chuàng)建一個(gè)基本的博客布局了。該博客將具有頁(yè)眉、頁(yè)腳、側(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;
}

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

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

如上圖所示，頁(yè)眉從第 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ī)范使我們能夠輕松創(chuàng)建復(fù)雜的布局。我們需要編寫的 CSS 更簡(jiǎn)單、更易于維護(hù)。在設(shè)計(jì)中創(chuàng)建復(fù)雜布局時(shí)，我們不再需要使用 float 或其他此類屬性。另一個(gè)巨大的優(yōu)勢(shì)是標(biāo)記和布局的完全分離。使用 CSS Grid 布局，可能性是無(wú)限的。

如果您對(duì)本教程有任何疑問，請(qǐng)?jiān)谠u(píng)論中告訴我。

關(guān)于 CSS Grid 布局的常見問題

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

CSS Grid 布局是一個(gè)二維布局系統(tǒng)，與其他 CSS 布局方法（如 Flexbox，它是一維的）不同。這意味著使用 CSS Grid，您可以同時(shí)控制水平和垂直布局，而其他方法則無(wú)法做到這一點(diǎn)。它旨在處理更復(fù)雜的設(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)格屬性來(lái)定義網(wǎng)格的布局和網(wǎng)格項(xiàng)目的位置。

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

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

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

要使用 CSS Grid 布局創(chuàng)建網(wǎng)格，您首先需要通過將元素的 display 屬性設(shè)置為 grid 或 inline-grid 來(lái)定義網(wǎng)格容器。然后，您可以使用 grid-template-columns 和 grid-template-rows 屬性來(lái)定義網(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，則第一列將占據(jù)可用空間的三分之一，而另外兩列將各占據(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)建復(fù)雜的嵌套布局。

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

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

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

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