CSS網格教程

CSS Grid是CSS小鎮中的新生事物，雖然尚未得到所有瀏覽器的完全支持，但它將成為佈局的未來系統

網格。數字前沿。當它們在計算機中移動時，我試圖對信息集群進行圖片顯示。他們長什麼樣？船嗎？摩托車？像高速公路一樣的賽道嗎？我一直夢想著一個我從未見過的世界。然後有一天..我進去了。—特隆：舊版

CSS網格簡介

CSS網格是使用CSS構建佈局的根本上新的方法。

留意caniuse.com上的CSS網格佈局頁面找出當前支持哪些瀏覽器。在撰寫本文時，2019年4月，所有主要瀏覽器（除了IE永遠不會支持它）都已經支持該技術，覆蓋了所有用戶的92％。

CSS Grid不是競爭對手彈性盒。它們可以在復雜的佈局上進行互操作和協作，因為CSS Grid可以在2個維度（行和列）上工作，而Flexbox可以在單個維度（行或列）上工作。

傳統上，Web的建築佈局是一個複雜的話題。

我不會深入探討造成這種複雜性的原因，這本身就是一個複雜的話題，但是您可以認為自己是一個非常幸運的人，因為如今您擁有2個非常強大且受支持的工具供您使用：

  • CSS Flexbox
  • CSS網格

這兩個工具是構建未來Web佈局的工具。

除非您需要支持IE8和IE9之類的舊瀏覽器，否則沒有必要弄亂以下內容：

  • 表格佈局
  • 浮點數
  • clearfix駭客
  • display: table駭客

在本指南中，從零知識的CSS Grid到成為熟練的用戶，您需要了解的所有信息。

基礎

CSS網格佈局在容器元素（可以是div或任何其他標籤）通過設置display: grid。

與flexbox一樣，您可以在容器上定義一些屬性，並在網格中的每個單獨項目上定義一些屬性。

這些屬性的組合將確定網格的最終外觀。

最基本的容器屬性是grid-template-columns和grid-template-rows。

網格模板列和網格模板行

這些屬性定義了網格中的列數和行數，並且它們還設置了每列/行的寬度。

以下代碼段定義了一個網格，該網格包含4列（每列200像素），兩行（每列300像素）。

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}

A grid with 4 columns and 2 rows

這是具有2列2行的網格的另一個示例：

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 100px 100px;
}

A grid with 2 columns and 2 rows

自動尺寸

很多時候，您可能具有固定的頁眉大小，固定的頁腳大小，以及主要內容，其高度靈活，具體取決於其長度。在這種情況下，您可以使用auto關鍵詞：

.container {
  display: grid;
  grid-template-rows: 100px auto 100px;
}

不同的列和行尺寸

在上面的示例中，我們通過對行使用相同的值和對列使用相同的值來製作漂亮，規則的網格。

您可以為每個行/列指定任何值，以創建許多不同的設計：

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
}

A grid with varying columns and rows dimensions

另一個例子：

.container {
  display: grid;
  grid-template-columns: 10px 100px;
  grid-template-rows: 100px 10px;
}

A grid with varying columns and rows dimensions

在單元之間增加空間

除非另有說明，否則單元格之間沒有空間。

您可以使用以下屬性添加間距：

  • grid-column-gap
  • grid-row-gap

或簡寫語法grid-gap。

例子：

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

A grid with gap between rows and columns

使用速記的相同佈局：

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 100px 50px;
  grid-gap: 25px;
}

在多個列和/或行上生成項目

每個單元格項目都可以選擇在一行中佔據多個框，然後水平或垂直擴展以獲取更多空間，同時遵守容器中設置的網格比例。

這些是我們將用於此的屬性：

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end

例子：

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
.item6 {
  grid-column-start: 3;
  grid-column-end: 5;
}

Editing the dimensions of some cells

數字對應於分隔每列的垂直線，從1開始：

The numbers correspond to the vertical line that separates each column

同樣的原則適用於grid-row-start和grid-row-end，除了這次不佔用更多列，而是一個單元占用了更多行。

速記語法

這些屬性具有以下速記語法：

  • grid-column
  • grid-row

用法很簡單，這是複制上述佈局的方法：

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / 4;
}
.item6 {
  grid-column: 3 / 5;
}

使用grid-area作為簡寫

這grid-area屬性可以用作grid-column和grid-row簡寫形式，當您需要將兩個元素都應用於單個元素時。而不是：

.item1 {
  grid-row: 1 / 4;
  grid-column: 3 / 5;
}

您可以使用

.item1 {
  grid-area: 1 / 3 / 4 / 5;
}

（網格行開始/網格列開始/網格行結束/網格列結束）

使用span

另一種方法是設置起始列/行，並使用span：

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
.item1 {
  grid-column: 2 / span 2;
}
.item6 {
  grid-column: 3 / span 2;
}

span也可以使用非速記語法：

.item1 {
  grid-column-start: 2;
  grid-column-end: span 2;
}

並且您還可以在start屬性上使用。在這種情況下，最終位置將用作參考，並且span將算作“後退”：

.item1 {
  grid-column-start: span 2;
  grid-column-end: 3;
}

更多網格配置

使用分數

在每種情況下，指定每列或每行的確切寬度都不是理想的。

分數是空間的單位。

以下示例將一個網格劃分為3個具有相同寬度的列，1⁄3每個可用空間。

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

使用百分比和雷姆

您還可以使用百分比，以及混合和匹配分數，像素，rem和百分比：

.container {
  grid-template-columns: 3rem 15% 1fr 2fr
}

使用repeat()

repeat()是一個特殊的函數，它使用一個數字來指示行/列將被重複的次數以及每個行/列的長度。

如果每一列都具有相同的寬度，則可以使用以下語法指定佈局：

.container {
  grid-template-columns: repeat(4, 100px);
}

這將創建4個具有相同寬度的列。

或使用分數：

.container {
  grid-template-columns: repeat(4, 1fr);
}

指定行的最小寬度

常見用例：調整窗口大小時，邊欄不會折疊到超過一定數量的像素。

這是一個側邊欄採用的示例1⁄4屏幕上的內容，且大小不低於200像素：

.container {
  grid-template-columns: minmax(200px, 3fr) 9fr;
}

您也可以使用auto關鍵詞：

.container {
  grid-template-columns: minmax(auto, 50%) 9fr;
}

或只是最小值：

.container {
  grid-template-columns: minmax(100px, auto) 9fr;
}

定位元素使用grid-template-areas

默認情況下，元素按照其在HTML結構中的順序放置在網格中。

使用grid-template-areas您可以定義模板區域以在網格中四處移動它們，也可以在多行/多列上生成一個項目，而不是使用grid-column。

這是一個例子：

<div class="container">
  <main>
    ...
  </main>
  <aside>
    ...
  </aside>
  <header>
    ...
  </header>
  <footer>
    ...
  </footer>
</div>
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    "header header header header"
    "sidebar main main main"
    "footer footer footer footer";
}
main {
  grid-area: main;
}
aside {
  grid-area: sidebar;
}
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}

儘管是原始訂單，但物品仍放置在grid-template-areas定義，取決於grid-area與他們相關聯的財產。

在模板區域中添加空單元格

您可以使用圓點設置一個空單元格.而不是中的區域名稱grid-template-areas：

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 300px 300px;
  grid-template-areas:
    ". header header ."
    "sidebar . main main"
    ". footer footer .";
}

用網格填充頁面

您可以使用以下方法擴展網格以填充頁面：fr：

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

示例：頁眉，側邊欄，內容和頁腳

這是一個使用CSS Grid創建站點佈局的簡單示例，該站點佈局提供了頁眉頂部，主體部分（左側為側邊欄，內容為右側）以及頁腳。

Layout example

這是標記：

<div class="wrapper">
  <header>Header</header>
  <article>
    <h1>Welcome</h1>
    <p>Hi!</p>
  </article>
  <aside><ul><li>Sidebar</li></ul></aside>
  <footer>Footer</footer>
</div>

這是CSS：

header {
  grid-area: header;
  background-color: #fed330;
  padding: 20px;
}
article {
  grid-area: content;
  background-color: #20bf6b;
  padding: 20px;
}
aside {
  grid-area: sidebar;
  background-color: #45aaf2;
}
footer {
  padding: 20px;
  grid-area: footer;
  background-color: #fd9644;
}
.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}

我添加了一些顏色使其更漂亮，但基本上它會分配給每個不同的標籤grid-area名稱，用於grid-template-areas財產.wrapper。

當佈局較小時，我們可以使用媒體查詢將邊欄放在內容下方：

@media (max-width: 500px) {
  .wrapper {
    grid-template-columns: 4fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

在CodePen上查看

看筆帶有邊欄的CSS網格示例由Flavio Copes（@flaviocopes） 在密碼筆。

Tech Wiki Online!