易於響應的現代CSS電網佈局-css教學-PHP中文網

CSS Grid Layout Example

CSS Grid 和 Flexbox 之間的區別是什麼？

如何使我的 CSS Grid 佈局響應式？

我可以一起使用 CSS Grid 和 Flexbox 嗎？

如何對齊 CSS Grid 中的項目？

如何在網格項目之間創建間隙？

如何在 CSS Grid 中重疊項目？

我可以在所有瀏覽器中使用 CSS Grid 嗎？

如何在 CSS Grid 中創建嵌套網格？

如何控制 CSS Grid 中網格軌道的尺寸？

首頁

web前端

css教學

易於響應的現代CSS電網佈局

Joseph Gordon-Levitt

Feb 10, 2025 am 10:13 AM

Easy and Responsive Modern CSS Grid Layout

核心要點

CSS Grid 是一款強大的佈局系統，允許在 CSS 中（而非 HTML 中）創建網格結構。大多數現代瀏覽器都支持它，但 IE11 除外，IE11 支持的是舊版本。
本文演示瞭如何創建一個響應式現代 CSS Grid 佈局，逐步添加 CSS Grid 並為舊版瀏覽器提供回退代碼。這包括居中元素、跨越項目以及調整小型設備佈局的技術。
CSS Grid 提供了諸如 grid-column 和 grid-row 之類的實用程序來定位網格項目，以及諸如 justify-items、align-items 和 align-self 之類的屬性來對齊和調整項目。它還允許嵌套網格，其中網格子元素本身可以是網格容器。
對於小型屏幕設備，可以使用 CSS Grid 輕鬆更改佈局結構使其線性化，重新定義網格區域並使用媒體查詢。這使得在較小屏幕上獲得更方便的佈局。

本文將展示如何創建一個響應式現代 CSS Grid 佈局，演示如何為舊版瀏覽器使用回退代碼，如何逐步添加 CSS Grid，以及如何在小型設備上重新構建佈局並使用對齊屬性居中元素。

在之前的文章中，我們探討了四種輕鬆構建響應式網格佈局的不同技術。那篇文章寫於 2014 年——在 CSS Grid 可用之前——因此在本教程中，我們將使用類似的 HTML 結構，但使用現代 CSS Grid 佈局。

在本教程中，我們將使用浮動創建一個具有基本佈局的演示，然後使用 CSS Grid 增強它。我們將演示許多有用的實用程序，例如居中元素、跨越項目以及通過重新定義網格區域和使用媒體查詢輕鬆更改小型設備上的佈局。您可以在這個 CodePen 中找到代碼：CodePen鏈接

響應式現代 CSS Grid 佈局

在我們深入創建響應式網格演示之前，讓我們首先介紹 CSS Grid。

CSS Grid 是一種強大的二維繫統，於 2017 年被添加到大多數現代瀏覽器中。它徹底改變了我們創建 HTML 佈局的方式。網格佈局允許我們在 CSS 中（而非 HTML 中）創建網格結構。

除 IE11 外，大多數現代瀏覽器都支持 CSS Grid，IE11 支持的是舊版本的標準，可能會出現一些問題。您可以使用 caniuse.com 檢查支持情況。

網格佈局有一個父容器，其 display 屬性設置為 grid 或 inline-grid。容器的子元素是網格項目，由於強大的網格算法，它們被隱式定位。您還可以應用不同的類來控制項目的放置、尺寸、位置和其他方面。

讓我們從一個基本的 HTML 頁面開始。創建一個 HTML 文件並添加以下內容：

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>
</body>
</html>

登入後複製

我們使用 HTML 語義來定義頁面的標題、側邊欄、主體和頁腳部分。在主體部分，我們使用 <article> 標籤添加一組項目。 <article> 是一個 HTML5 語義標籤，可用於包裝獨立且自包含的內容。單個頁面可以包含任意數量的 <article> 標籤。

這是此階段頁面的屏幕截圖：

Easy and Responsive Modern CSS Grid Layout

接下來，讓我們添加基本的 CSS 樣式。在文檔的頭部添加一個 <style> 標籤並添加以下樣式：

body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}

登入後複製

這是一個小型演示頁面，因此我們將直接為標籤設置樣式以提高可讀性，而不是應用類命名系統。

我們使用浮動將側邊欄定位到左側，將主體部分定位到右側，並將側邊欄的寬度設置為固定的 6.3rem 寬度。然後，我們使用 CSS calc() 函數計算並設置主體部分的剩餘寬度。主體部分包含一組組織為垂直塊的項目庫。

Easy and Responsive Modern CSS Grid Layout

佈局並不完美。例如，側邊欄的高度與主體內容部分的高度不同。有各種 CSS 技術可以解決這些問題，但大多數都是技巧或變通方法。由於此佈局是 Grid 的回退，因此將被越來越少的用戶看到。回退是可用的且足夠好。

Chrome、Firefox、Edge、Opera 和 Safari 的最新版本都支持 CSS Grid，這意味著如果您的訪問者使用這些瀏覽器，則無需擔心提供回退。您還需要考慮常青瀏覽器。 Chrome、Firefox、Edge 和 Safari 的最新版本是常青瀏覽器。也就是說，它們會在不提示用戶的情況下自動靜默更新自身。為了確保您的佈局在每個瀏覽器中都能正常工作，您可以從基於浮動的默認回退開始，然後使用漸進增強技術來應用現代 Grid 佈局。使用舊版瀏覽器的用戶將不會獲得相同的體驗，但這已經足夠好了。

漸進增強：您不必覆蓋所有內容

在回退佈局之上添加 CSS Grid 佈局時，您實際上不必覆蓋所有標籤或使用完全獨立的 CSS 樣式：

在不支持 CSS Grid 的瀏覽器中，您添加的網格屬性將被簡單地忽略。
如果您使用浮動來佈局元素，請記住網格項目優先於浮動。也就是說，如果您向一個元素添加 float: left|right 樣式，而該元素也是一個網格元素（具有 display: grid 樣式的父元素的子元素），則該浮動將被忽略，而採用網格。
可以使用 @supports 規則在 CSS 中檢查特定功能的支持。這允許我們在必要時覆蓋回退樣式，而舊版瀏覽器會忽略 @supports 塊。

現在，讓我們將 CSS Grid 添加到我們的頁面中。首先，讓我們將 <body> 標記為網格容器並設置網格列、行和區域：

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>
</body>
</html>

登入後複製

我們使用 display:grid 屬性將 <body> 標記為網格容器。我們設置了 0.1vw 的網格間隙。間隙允許您在網格單元格之間創建槽，而不是使用邊距。我們還使用 grid-template-columns 添加兩列。第一列採用固定寬度 6.5rem，第二列採用剩餘寬度。 fr 是一個分數單位，1fr 等於可用空間的一部分。

接下來，我們使用 grid-template-rows 添加三行。第一行採用固定高度 6rem，第三行採用固定高度 3rem，剩餘的可用空間 (1fr) 分配給第二行。

然後，我們使用 grid-template-areas 將由列和行的交叉點產生的虛擬單元分配給區域。現在我們需要使用 grid-area 實際定義區域模板中指定的那些區域：

body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}

登入後複製

大多數回退代碼對 CSS Grid 沒有任何副作用，除了主體部分的寬度 width: calc(100% - 7.2rem);，它計算在減去側邊欄的寬度加上任何邊距/填充空間後的主體部分的剩餘寬度。

這是結果的屏幕截圖。請注意主體區域沒有佔據全部剩餘寬度：

Easy and Responsive Modern CSS Grid Layout

為了解決這個問題，我們可以在支持 Grid 時添加 width: auto;：

body {
  /*...*/
  display: grid;
  grid-gap: 0.1vw;
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: 6rem 1fr 3rem;
  grid-template-areas: "header   header"
                       "sidebar content"
                       "footer footer";  
}

登入後複製

這是現在結果的屏幕截圖：

Easy and Responsive Modern CSS Grid Layout

添加嵌套網格

網格子元素本身可以是網格容器。讓我們將主體部分設為網格容器：

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>
</body>
</html>

登入後複製

我們使用 0.1vw 的網格間隙，並使用 repeat(auto-fill, minmax(12rem, 1fr)); 函數定義列和行。 auto-fill 選項嘗試使用盡可能多的列或行填充可用空間，如果需要，則創建隱式列或行。如果您想將可用的列或行放入可用空間中，則需要使用 auto-fit。閱讀有關 auto-fill 和 auto-fit 之間區別的良好解釋。

這是結果的屏幕截圖：

Easy and Responsive Modern CSS Grid Layout

使用 Grid grid-column、grid-row 和 span 關鍵字

CSS Grid 提供了 grid-column 和 grid-row，允許您使用網格線在父網格內定位網格項目。它們是以下屬性的簡寫：

grid-row-start：指定網格項目在網格行中的起始位置
grid-row-end：指定網格項目在網格行中的結束位置
grid-column-start：指定網格項目在網格列中的起始位置
grid-column-end：指定網格項目在網格列中的結束位置

您還可以使用 span 關鍵字來指定要跨越多少列或行。

讓我們使主體區域的第二個子元素跨越四列和兩行，並將其從第二列和第一行（這也是它的默認位置）定位：

body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}

登入後複製

這是結果的屏幕截圖：

Easy and Responsive Modern CSS Grid Layout

使用 Grid 對齊實用程序

我們希望將標題、側邊欄和頁腳內的文本以及 <article> 元素內的數字居中。

CSS Grid 提供了六個屬性 justify-items、align-items、justify-content、align-content、justify-self 和 align-self，可用於對齊和調整網格項目。它們實際上是 CSS 盒子對齊模塊的一部分。

在 header、aside、article 和 footer 選擇器內添加以下內容：

body {
  /*...*/
  display: grid;
  grid-gap: 0.1vw;
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: 6rem 1fr 3rem;
  grid-template-areas: "header   header"
                       "sidebar content"
                       "footer footer";  
}

登入後複製

justify-items 用於沿行軸或水平方向調整網格項目。
align-items 沿列軸或垂直方向對齊網格項目。它們都可以採用 start、end、center 和 stretch 值。

這是居中元素後的屏幕截圖：

Easy and Responsive Modern CSS Grid Layout

在小型設備中重新構建網格佈局

我們的演示佈局對於中型和大型屏幕很方便，但對於小型屏幕設備來說可能不是構建頁面的最佳方式。使用 CSS Grid，我們可以輕鬆更改此佈局結構，使其在小型設備中線性化——通過重新定義網格區域和使用媒體查詢。

這是添加用於在小型設備上重新構建佈局的代碼之前的屏幕截圖：

Easy and Responsive Modern CSS Grid Layout

現在，添加以下 CSS 代碼：

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>
</body>
</html>

登入後複製

在寬度小於 575 像素的設備上，佈局將變為線性：

Easy and Responsive Modern CSS Grid Layout

請注意，側邊欄的寬度沒有填充可用寬度。這是由回退代碼引起的，因此我們需要做的就是在支持 Grid 的瀏覽器上使用 width: auto; 覆蓋 width: 6.3rem;：

body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}

登入後複製

這是最終結果的屏幕截圖：

Easy and Responsive Modern CSS Grid Layout

您可以在本文開頭顯示的 CodePen 中找到最終代碼，或直接訪問 CodePen：CodePen鏈接

結論

在本教程中，我們使用 CSS Grid 創建了一個響應式演示佈局。我們演示了為舊版瀏覽器使用回退代碼，逐步添加 CSS Grid，在小型設備中重新構建佈局以及使用對齊屬性居中元素。

關於輕鬆響應式現代 CSS Grid 佈局的常見問題解答

CSS Grid 和 Flexbox 之間的區別是什麼？

CSS Grid 和 Flexbox 都是 CSS 中強大的佈局系統。雖然在某些情況下它們可以互換使用，但它們各自都有其獨特的優勢。 Flexbox 是一種一維佈局模型，它特別適合沿列或行分配項目。另一方面，CSS Grid 是一種二維佈局系統，非常適合同時在行和列中排列元素。它非常適合創建複雜的 Web 佈局。

如何使我的 CSS Grid 佈局響應式？

CSS Grid 使得創建響應式佈局無需媒體查詢變得很容易。您可以使用 fr 單位，它表示網格容器中可用空間的一部分。例如，如果您想要三列等寬列，您可以使用 grid-template-columns: 1fr 1fr 1fr。列將自動調整其大小以適應屏幕。

我可以一起使用 CSS Grid 和 Flexbox 嗎？

是的，CSS Grid 和 Flexbox 可以一起用於佈局。您可以使用 CSS Grid 創建整體頁面佈局，然後使用 Flexbox 佈局網格單元格內的單個組件或部分。這種組合允許對佈局進行高度的靈活性和控制。

如何對齊 CSS Grid 中的項目？

CSS Grid 提供了多個用於對齊項目的屬性，包括 justify-items、align-items、justify-self 和 align-self。這些屬性可用於沿行軸（對齊）或列軸（對齊）對齊項目。例如，justify-items: center 將沿行軸居中項目。

如何在網格項目之間創建間隙？

您可以使用 grid-gap 屬性在網格項目之間創建間隙。此屬性是 grid-row-gap 和 grid-column-gap 的簡寫。例如，grid-gap: 20px 將在所有網格項目之間創建 20px 的間隙。

`auto-fill` 和 `auto-fit` 關鍵字在 CSS Grid 中是如何工作的？

auto-fill 和 auto-fit 關鍵字與 grid-template-columns 和 grid-template-rows 屬性中的 repeat() 函數一起使用。 auto-fill 使用盡可能多的項目填充行或列，如果項目不足則創建空單元格。 auto-fit 的行為類似，但它會折疊空單元格，使項目拉伸以填充行或列。