5分鐘學會 CSS Grid 佈局

這是一篇快速介紹網站將來佈局的文章。

Grid 佈局是網站設計的基礎，CSS Grid 是建立網格佈局最強大和最簡單的工具。

CSS Grid 今年也得到了主流瀏覽器（Safari，Chrome，Firefox，Edge）的原生支持，因此我相信全部的前端開發人員都必須在不久的未來學習這項技術。

在本文中，我將盡量快速地介紹CSS網格的基本知識。我會把你不該該關心的一切都忽略掉了，只是爲了讓你瞭解最基礎的知識。

你的第一個 Grid 佈局

CSS Grid 佈局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網格)，items 是 grid(網格) 內的內容。

下面是一個 wrapper 元素，內部包含6個 items ：

<div class\="wrapper"\>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

要把 wrapper 元素變成一個 grid(網格)，只要簡單地把其 display 屬性設置爲 grid 便可：

.wrapper {
    display: grid;
}

可是，這尚未作任何事情，由於咱們沒有定義咱們但願的 grid(網格) 是怎樣的。它會簡單地將6個 div 堆疊在一塊兒。

我已經添加了一些樣式，可是這與 CSS Grid 沒有任何關係。

Columns(列) 和 rows(行)

爲了使其成爲二維的網格容器，咱們須要定義列和行。讓咱們建立3列和2行。咱們將使用grid-template-row和grid-template-column屬性。

.wrapper {
    display: grid;
    grid\-template-columns: 100px 100px 100px;
    grid\-template-rows: 50px 50px;
}

正如你所看到的，咱們爲 grid-template-columns 寫入了 3 個值，這樣咱們就會獲得 3 列。 咱們想要獲得 2 行，所以咱們爲 grid-template-rows 指定了2個值。

這些值決定了咱們但願咱們的列有多寬（ 100px ），以及咱們但願行數是多高（ 50px ）。 結果以下：

爲了確保你能正確理解這些值與網格外觀之間的關係，請看一下這個例子。

.wrapper {
    display: grid;
    grid\-template-columns: 200px 50px 100px;
    grid\-template-rows: 100px 30px;
}

請嘗試理解上面的代碼，思考一下以上代碼會產生怎樣的佈局。

這是上面代碼的佈局的結果：

很是好理解，使用起來也很是簡單是否是？下面咱們來加大一點難度。

放置 items(子元素)

接下來你須要學習的是如何在 grid(網格) 上放置 items(子元素) 。特別注意，這裏纔是體現 Grid 佈局超能力的地方，由於它使得建立佈局變得很是簡單。

咱們使用與以前相同的 HTML 標記，爲了幫助咱們更好的理解，咱們在每一個 items(子元素) 加上了單獨的 class ：

<div class="wrapper">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

如今，咱們來建立一個 3×3 的 grid(網格)：

.wrapper {
    display: grid;
    grid\-template-columns: 100px 100px 100px;
    grid\-template-rows: 100px 100px 100px;
}

將獲得如下佈局：

不知道你發現沒有，咱們只在頁面上看到 3×2 的 grid(網格)，而咱們定義的是 3×3 的 grid(網格)。這是由於咱們只有 6 個 items(子元素) 來填滿這個網格。若是咱們再加3個 items(子元素)，那麼最後一行也會被填滿。

要定位和調整 items(子元素) 大小，咱們將使用 grid-column 和 grid-row 屬性來設置：

.item1 {
    grid\-column-start: 1;
    grid\-column-end: 4;
}

咱們在這裏要作的是，咱們但願 item1 佔據從第一條網格線開始，到第四條網格線結束。換句話說，它將獨立佔據整行。 如下是在屏幕上顯示的內容：

若是你不明白咱們設置的只有 3 列，爲何有4條網格線呢？看看下面這個圖像，我畫了黑色的列網格線：

請注意，咱們如今正在使用網格中的全部行。當咱們把第一個 items(子元素) 佔據整個第一行時，它把剩下的 items(子元素) 都推到了下一行。

最後，給你一個更簡單的縮寫方法來編寫上面的語法：

.item1 {
    grid\-column-start: 1;
    grid\-column-end: 4;
}

爲了確保你已經正確理解了這個概念，咱們從新排列其餘的 items(子元素) 。

.item1 {
    grid\-column-start: 1;
    grid\-column-end: 3;
}
.item3 {
    grid\-row-start: 2;
    grid\-row-end: 4;
}
.item4 {
    grid\-column-start: 2;
    grid\-column-end: 4;
}

你能夠嘗試在你的腦子裏過一邊上面代碼的佈局效果，應該不會很難。

如下是頁面上的佈局效果：

原文連接：medium.freecodecamp.org/learn-css-g…