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-columnsgrid-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-startgrid-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-columngrid-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個具有相同寬度的列,13每個可用空間。

.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);
}

指定行的最小寬度

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

這是一個側邊欄採用的示例14屏幕上的內容,且大小不低於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!