初學者的CSS網格佈局指南-css教學-PHP中文網

首頁

web前端

css教學

初學者的CSS網格佈局指南

尊渡假赌尊渡假赌尊渡假赌

Feb 08, 2025 pm 01:19 PM

初學者的CSS網格佈局指南

> CSS網格佈局模塊已徹底改變了網站的構建方式。它提供了工具，可以允許不棘手的黑客和過去的創造性解決方案進行高級佈局。

>在本網格簡介中，我們將介紹網格佈局的工作原理，我們將查看許多在實踐中使用它的簡單示例。

鑰匙要點

網格結構和項目位置：探索CSS網格的基本特徵，包括使用網格結構使用網格結構，使用網格 - 板塊柱，網格 - 板板行和網格 - 板置區域。本教程展示了帶有間隙屬性的間距項目，並將其整理成特定的行和列以精確的佈局。
使用CSS網格的響應式設計：強調CSS網格對響應網絡設計的適應性，展示瞭如何使用媒體查詢來改變不同屏幕尺寸的網格佈局。還討論了高級技術，例如重疊的網格項目和創建響應式佈局，而無需媒體查詢，從而強調了CSS網格在現代網絡設計中的多功能性。
>
開始使用網格佈局

啟動網格就像這樣做一樣簡單：

>現在，包含元素的所有直接子女將是“網格項目”。首先，它們只會在單列中顯示為一堆行，如下演示所示。

。

>請參見筆

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

css網格基礎：顯示：sitepoint（@sitepoint）

網格

在上面的示例中，我們有一個充當容器的

元素。在其中，我們有幾個元素，現在是網格項目：

到目前為止，我們還沒有取得太多成就，因為我們將在沒有顯示的情況下獲得相同的結果：網格。

<span><span><span><div> class<span>="container"</span>>
  <span><span><span><header>></header></span>header<span><span></span>></span>
</span>  <span><span><span><aside>></aside></span>aside<span><span></span>></span>
</span>  <span><span><span><main>></main></span>main<span><span></span>></span>
</span>  <span><span><span><footer>></footer></span>footer<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

進一步閱讀：

在上面的演示中，容器以視口為中心。閱讀更多有關用網格的核心元素的更多信息。

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

請參閱codepen上的sitepoint（@sitepoint）
gap bapen。

差距屬性在不久將看到的那樣，垂直和水平的元素之間插入元素之間的空間。（如果需要的話，我們可以設置不同的水平和垂直間隙。）

進一步閱讀：

>閱讀有關差距屬性的更多信息。

設置網格列

>當前，我們有一個“隱式”網格 - 這意味著瀏覽器只是在弄清楚自己的網格，因為我們尚未指定任何行或列。默認情況下，我們只能獲得一列和四行 - 每個網格項目一個。現在讓我們指定一些列：

>帶有網格 - 板塊柱，我們指定的是，我們需要四列，每個列的寬度為1FR，或一小部分可用空間。（我們可以使用非常方便的重複（）函數來代替1FR 1FR 1FR 1FR 1FR 1FR。

現在，我們的網格項目已在一排中佈置，如下所示。

<span><span><span><div> class<span>="container"</span>>
  <span><span><span><header>></header></span>header<span><span></span>></span>
</span>  <span><span><span><aside>></aside></span>aside<span><span></span>></span>
</span>  <span><span><span><main>></main></span>main<span><span></span>></span>
</span>  <span><span><span><footer>></footer></span>footer<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

請參閱codepen上的codepen。

進一步閱讀：

有關網格 - 板塊柱的更多信息。

>了解有關柔性長度（FR）單元的更多信息。 >

>如何使用網格的重複（）函數。

如果我們將該行添加到上面的筆中，那麼還沒有發生太多事情，因為我們尚未指定我們如何希望我們的網格項目適合這些行和列。（同樣，請注意，自動自動自動可以使用重複（）函數寫為重複（3，auto）。）

進一步閱讀：

有關網格網板行的更多信息。

>如何使用網格的重複（）函數。

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

將網格項目放在網格上

>我們瀏覽器的開發人員工具非常方便地了解CSS網格佈局。如果我們到目前為止檢查代碼，我們可以看到定義網格的水平和垂直網格線，如下圖所示。

>有五個垂直網格線和四個水平網格線，它們都編號了。我們可以使用這些網格線來指定我們希望如何佈置網格項目。 >

元素以跨越四列和一行：

>這告訴

從編號為1的網格列線開始，並在編號為5的列線上結束。由於未指定端線，它只是跨越下一行，因此網格行：1等於網格行：1 /2

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

讓我們做類似於的事情：

這裡唯一的區別是我們將設置為位於第3和第4行之間。

現在，讓我們定位和元素：>

<span><span><span><div> class<span>="container"</span>>
  <span><span><span><header>></header></span>header<span><span></span>></span>
</span>  <span><span><span><aside>></aside></span>aside<span><span></span>></span>
</span>  <span><span><span><main>></main></span>main<span><span></span>></span>
</span>  <span><span><span><footer>></footer></span>footer<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

結果顯示在下面的筆中。

>請參閱筆

css網格基礎：通過sitepoint（@sitepoint）

在codepen上放置編號行的項目。

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

>現在，我們有一個靈活且響應的佈局，而沒有黑客的浮標，溢出和過去的其他噩夢。如果我們將內容添加到網格項目中，它們將擴展以包含該內容，並且並排列將始終具有相等的高度。（對於那些在Noughties中與CSS合作的人，實現同等高度的專欄是一場噩夢！）

關於編號網格線的有用的知識

>如果您再次查看上圖，您會發現，沿底部，垂直線也被負數命名。每個網格線都有一個正數和負數。這有很多用途，例如當有很多網格線路時，我們不一定知道會有多少。我們可以將我們的

元素設置為帶有網格列的所有五列：1 / -1，因為最後一個垂直線被編號為5和-1。

網格還具有一個跨度關鍵字，我們可以用它來告訴元素跨越許多行或列。我們

佈局的另一個選項是編寫網格列：1 / span 4。這告訴元素從第一個網格線開始，並在我們的四個列中跨越跨度。

在上面的筆中嘗試這些變化。

進一步閱讀：

了解有關網格線的更多信息。
網格線編號的方向受我們的佈局寫作模式的影響。
>

>使用名為網格線

放置網格項目

>我們已經看到瞭如何使用編號的網格線在網格上組織元素。但是，我們還可以為我們的某些或全部網格線命名並引用這些線條 - 這可以更直觀，並使我們免於計算網格線。

>讓我們更新我們的佈局以包括一些命名行：

在上面的代碼中，我們僅命名了三條垂直網格線。這些名稱在我們的列寬度旁邊的方括號中移動，代表我們的列線。 >

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

我們現在可以將我們的一些元素放在網格上，例如：

我們可以在下面的演示中看到此代碼。

<span><span><span><div> class<span>="container"</span>>
  <span><span><span><header>></header></span>header<span><span></span>></span>
</span>  <span><span><span><aside>></aside></span>aside<span><span></span>></span>
</span>  <span><span><span><main>></main></span>main<span><span></span>></span>
</span>  <span><span><span><footer>></footer></span>footer<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

>請參閱筆

css網格基礎：通過sitepoint（@sitepoint）

在codepen上放置命名行的項目

進一步閱讀：

>了解有關命名網格線的更多信息。

>在網格規範中閱讀有關命名線的信息。

>使用網格 - 板截面，我們繪製了一個簡單的文本網格，指定了我們希望如何佈置元素。現在，我們只需要將這些區域名稱應用於我們的元素：

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

因此，

將跨越所有四個列，元素將僅位於第二行的第一列中，依此類推。

我們可以在下面的筆中看到這一點。

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

>請參見筆

css網格基礎：使用sitepoint（@sitepoint）

在codepen上使用名稱區域的項目。

這個代碼比我們之前的代碼要簡單得多，無論是使用編號還是命名行。使用這樣的命名網格區域幾乎是令人尷尬的簡單 - 例如使用Wysiwyg編輯器而不是編寫真實的代碼。但是請放心，這不是作弊！這只是超級酷。

使用線號並帶有網格區域的命名行

>值得注意的是，我們還可以使用行號和/或命名線來定義網格區域。例如，我們可以做類似的事情，而不是使用網格 - 板截面屬性：>

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

模式是row-start / column-start / row-end / column-end。您可以在Codepen

上查看此演示。就我個人而言，我發現很難記住這種行和列的模式，但是網格的偉大是有很多方法可以做同樣的事情。 >

更改網格項目的佈局

在過去的幾天中，如果我們決定在某個時候更改頁面元素的佈局，則可能會導致許多代碼重構。例如，如果我們想將元素擴展到佈局的末尾怎麼辦？對於網格區域，這非常容易。我們可以做到這一點：

>我們剛剛從頁腳上刪除了一個網格單元，並將其分配給了一邊，從而導致了我們在下面的筆中看到的。

<span><span><span><div> class<span>="container"</span>>
  <span><span><span><header>></header></span>header<span><span></span>></span>
</span>  <span><span><span><aside>></aside></span>aside<span><span></span>></span>
</span>  <span><span><span><main>></main></span>main<span><span></span>></span>
</span>  <span><span><span><footer>></footer></span>footer<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

>請參閱筆

CSS電網基礎：使用sitepoint（@sitepoint）

在codepen上放置項目2

>我們甚至可以決定我們在某個地方想要一個空單元。我們僅使用一個或多個時期來做到這一點，例如：

查看您是否可以預測此結果，然後查看此Codepen演示。

進一步閱讀：

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span><span>}
</span>

了解有關網格板序列的更多信息。 >

了解有關網格區域的更多信息。

我們現在只指定了一個列，並在該列中設置了元素的順序。

>請參閱筆

css網格基礎：在codepen上使用sitepoint（@sitepoint）

使用媒體查詢。

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>gap: 10px;
</span>  <span>grid-template-columns: 1fr 1fr 1fr 1fr;
</span><span>}
</span>

>按下底部的0.5倍按鈕，以查看佈局的響應方式（或在Codepen上查看筆，並擴大並縮小視口）。

更改網格項目的顯示順序

>我們現在處於一個很好的時刻，看看更改網格佈局中元素的顯示順序是多麼容易。在上面的示例中，我們的源順序為，，和，但是在我們的媒體查詢中，我們將元素設置為 element，以顯示出 element上方。很容易與網格交換元素的顯示順序！我們甚至可以完全扭轉所有這些的顯示順序。

即使不使用命名元素，我們也可以重新排序網格元素。默認情況下，網格項目根據其HTML源訂單放置。他們的默認順序為0。我們可以使用此訂單屬性來更改元素的視覺佈置。訂單值越低，出現元素就越早。即使是負整數也可以使用，因此，如果我們的

元素的順序為-1，它將首先出現。

>如上所示，我們可以將，

和的訂單值分別設置為1、2和3。（請查看這支筆以進行現場演示。）

> 不過，一個謹慎的詞：重新排序的元素可以是一場噩夢，以供訪問性，焦點不可預測地圍繞屏幕跳躍，因此請謹慎使用。

進一步閱讀：

>我們在上面看到，我們可以使佈局響應不同的屏幕尺寸。首先，通過將列寬度設置為諸如FR之類的柔性單元，佈局可以根據需要生長和收縮。其次，我們可以使用媒體查詢在某些斷點處重新組織佈局。

網格佈局具有無需使用媒體查詢即可進行佈局反流的工具。但是，我們無法通過以上合作的佈局來實現這一目標。它僅適用於更簡單的佈局，其中每列共享相同的寬度。

考慮以下html：

讓我們在寬屏幕上並排坐在這些divs上，然後堆放在小屏幕上：

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

>您可以在下面的筆中看到結果。

<span><span><span><div> class<span>="container"</span>>
  <span><span><span><header>></header></span>header<span><span></span>></span>
</span>  <span><span><span><aside>></aside></span>aside<span><span></span>></span>
</span>  <span><span><span><main>></main></span>main<span><span></span>></span>
</span>  <span><span><span><footer>></footer></span>footer<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

請參閱codepen上的sitepoint（@sitepoint）

的響應式網格基礎：codepen。

（同樣，按下底部的0.5倍按鈕，以查看佈局的響應。）

>代碼更為高級，我們在如何使用CSS GRID重複（）函數方面對其進行了詳細說明。在此處顯示它的主要目的是讓網格佈局的可能性。

進一步閱讀：

>閱讀有關自動擬合關鍵字的更多信息。
>閱讀有關使用min（）函數使用minmax（）函數的更多信息。

網格中的重疊元素

>創建網格佈局後，我們不僅可以將每個網格項目分配給其自己的單獨的網格區域。我們可以輕鬆地設置網格項目以部分或完整分享相同的網格區域。這使我們能夠創建美麗，創意的佈局 - 具有重疊的元素，而沒有任何棘手的代碼。

>讓我們創建一個包含圖像的簡單網格和部分涵蓋圖像的文本。這是html：

<span><span>.container</span> {
</span>  <span>display: grid;
</span><span>}
</span>

>現在，我們將分配一些行和圖像之間部分共享的行和列：>

該結果顯示在以下Codepen演示中。

<span><span><span><div> class<span>="container"</span>>
  <span><span><span><header>></header></span>header<span><span></span>></span>
</span>  <span><span><span><aside>></aside></span>aside<span><span></span>></span>
</span>  <span><span><span><main>></main></span>main<span><span></span>></span>
</span>  <span><span><span><footer>></footer></span>footer<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

請參閱pen

css網格基礎：sitepoint（@sitepoint）

上的分層網格元素。

div出現在圖像上方，僅僅是因為它按照源順序遵循圖像。我們可以通過應用z索引來更改另一個元素在另一個元素上出現。例如，嘗試將z索引2的z索引設置為上方的圖像；現在它將涵蓋Div。進一步閱讀：

要了解圖像在上面的演示中的定位，請查看如何使用CSS對象擬合和對象位置。

了解有關Z-Index屬性的更多信息。

巨大的

您可以了解網格。 >

網格與Flexbox

一個永恆的問題是我們是否應該使用網格或flexbox。的確，這兩個佈局工具可以做的事情之間存在一些重疊。通常，在有重疊的地方，值得進行一些測試以查看哪種特定情況下具有更好的工具包。 >

作為一般規則，請記住這一點：

>

Flexbox主要設計用於朝單個方向鋪設元素（即使這些元素跨線包裝）。

網格設計用於在兩個方向上佈置元素，以便它們水平和垂直對齊。

。
瀏覽器支持網格

>當我們首次發表本文（早在2016年）時，網格對瀏覽器來說是相當新的，並且支持並不是普遍的。如今，所有主要瀏覽器都支持網格。仍然會有一些較舊的瀏覽器不支持它，但是在許多情況下，這些瀏覽器仍然可以很好地顯示內容。一種不錯的選擇方法是從移動設備的單列佈局開始，這可以作為不支持網格佈局的瀏覽器的後備。可以通過媒體查詢添加網格樣式的瀏覽器，以支持它們的瀏覽器 - 將顯示在較寬的屏幕上。
您可以查看Caniuse上網格的最新瀏覽器支持。
>
學習網格的資源

>最後，讓我們以一些進一步的學習資源結束。許多了不起的人提供了有關網格的教程，視頻，書籍等。這裡只有幾個：

Tiffany Brown的第三版
- CSS Master，第三版，是CSS的一個很好的介紹，並在如何使用網格和其他佈局方法的深度指導下進行了深入的指導。 >
- >
- > CSS-Tricks為CSS網格提供了完整的指南，這是一個非常方便的資源。
CSS網格佈局是CSS中的一個佈局系統，可讓您為網頁創建複雜的基於二維網格的佈局。它提供了一種更加靈活，更有效的方法來設計和定位元素在網格中。
>
>如何在網頁上啟用CSS網格？

啟用CSS網格，您可以使用顯示：網格; CSS代碼中的屬性。這將使所選的容器成為網格容器。
>
CSS網格的主要組件是什麼？
> CSS網格的主要組件是網格容器和網格項目。使用顯示器來定義容器：網格；屬性，這些項目是放置在容器內的元素。
>
>如何在CSS網格中定義行和列？
>您可以通過設置諸如網格 - 網絡之類的屬性來定義行和列來定義行和列 - 排，網格 - 板塊柱或使用速記屬性網格板。

>我可以在CSS網格中具有不同的列寬度和行高度嗎？通過在網格模板定義中使用不同的值，例如固定長度，百分比或用於柔性尺寸的FR單元。
我可以在網格中嵌套網格嗎？

是的，您可以將網格嵌套在網格中，通過使網格項目本身為網格容器來創建複雜的佈局。

我可以使網格適應不同的屏幕尺寸嗎？您可以使用媒體查詢，百分比或相對單元將網格佈局調整到不同的屏幕尺寸和設備中。
>