引入CSS網格佈局-css教學-PHP中文網

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

Introducing the CSS Grid Layout

圖片來自 SitePoint/Natalia Balska。

在創建複雜的網站時，網格至關重要。現代網頁設計中網格的重要性從眾多實現網格系統以加快開發速度的框架數量中可見一斑。

隨著 CSS Grid 佈局規範的引入，您無需再包含單獨的樣式表即可使用網格系統。另一個優點是，您無需再依賴 inline 和 float 等屬性來佈置網頁上的元素。在本教程中，我們將介紹網格系統的基礎知識，並創建一個基本的博客佈局。

瀏覽器支持

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

它可以通過 chrome://flags 中的 “實驗性 Web 平台功能” 標誌在 Chrome 中啟用。您可以使用 layout.css.grid.enabled 標誌在 Firefox 中啟用它。

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

注意：Internet Explorer 目前已實現舊版本的規範。不幸的是，這意味著它與最新規範並不完全兼容。在學習本教程中的示例時，建議您使用啟用了相應標誌的 Chrome 或 Firefox。

網格系統術語

在佈置元素方面，CSS 網格系統類似於表格。但是，它更加強大和靈活。在本節中，我將討論一些在使用網格時需要注意的術語：

fr 單位：此單位用於指定可用空間的一部分。它旨在與 grid-rows 和 grid-columns 一起使用。根據規範——

分配分數空間發生在所有“長度”或基於內容的行和列大小達到其最大值之後。

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

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

單元格：單元格是網格的基本構建塊。在下圖中，共有九個單元格。

區域：區域是一個矩形形狀，具有任意數量的單元格。因此，軌道是一個區域，單元格 也是一個區域。

Introducing the CSS Grid Layout

在網格中定位元素

讓我們從基礎開始。在本節中，我將教您如何使用網格將元素定位到特定位置。要使用 CSS Grid 佈局，您需要一個父元素和一個或多個子元素。為了演示，我們將使用以下標記作為我們的網格系統：

<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>

登入後複製

完成標記後，您需要在父元素上應用 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 列充當槽，用於在元素之間提供所需的間距。第一列寬度為 200px。第三列佔據剩餘空間的 0.3 部分。類似地，第五列佔據剩餘空間的 0.7 部分。

對於 grid-template-rows 中的第一行使用 auto 允許該行根據其內部的內容進行擴展。 20px 行充當槽。

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

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

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

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

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

考慮到以上所有內容，要將元素 B 移動到第二個單元格，您將使用以下 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 移動到第六個單元格，您將使用以下 CSS：

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

登入後複製

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

創建基本佈局

現在是時候創建一個基本的博客佈局了。該博客將具有頁眉、頁腳、側邊欄和兩個用於實際內容的部分。讓我們從標記開始：

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

登入後複製

請記住，標記中元素的順序不會影響元素在網頁上的位置。只要您不更改 CSS，您就可以在標記中將頁腳放在頁眉上方，而網頁上元素的位置不會改變。當然，我不建議這樣做。關鍵是——您的標記將不再決定元素的位置。

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

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

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

登入後複製

類似地，“額外內容”從第 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>

登入後複製

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

結論

CSS 網格佈局規範使我們能夠輕鬆創建複雜的佈局。我們需要編寫的 CSS 更簡單、更易於維護。在設計中創建複雜佈局時，我們不再需要使用 float 或其他此類屬性。另一個巨大的優勢是標記和佈局的完全分離。使用 CSS Grid 佈局，可能性是無限的。

如果您對本教程有任何疑問，請在評論中告訴我。

關於 CSS Grid 佈局的常見問題

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

CSS Grid 佈局是一個二維佈局系統，與其他 CSS 佈局方法（如 Flexbox，它是一維的）不同。這意味著使用 CSS Grid，您可以同時控制水平和垂直佈局，而其他方法則無法做到這一點。它旨在處理更複雜的設計和大型佈局。它也更靈活、更強大，允許更具創意和精細的設計。

如何開始使用 CSS Grid 佈局？

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

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

是的，CSS Grid 佈局可以與其他 CSS 佈局方法結合使用。例如，您可以將 Flexbox 用於網站的組件，將 CSS Grid 用於整體佈局。這使您可以利用每種佈局方法的優勢。

如何使用 CSS Grid 佈局創建網格？

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