[譯] CSS 網格佈局入門：Part 2

原文連接：INTRODUCTION TO CSS GRID LAYOUT，from FIREFOX DEVTOOLS PLAYGROUND

這裏接着 《CSS 網格佈局入門：Part 1》 繼續講。

放置項目

理解網格線

如今咱們已經知道如何定義網格容器以及網格的行和列了。下面要學習如何在網格中放置項目了。放置項目有好幾種方式，咱們從最基本的開始學習。下面是一個  3x2 的網格：

網格里的每一個項目都會自動按默認順序放置。

若是咱們但願對項目取得進一步的控制，就須要使用網格線號（grid line numbers）來放置它了。網格線是按照從左到右，從上到下編號的（若是使用的從右到左排版的語言，那麼網格線是按照從右到左編號的）。上面例子裏的網格線的編號方式以下：

放置項目

下面是咱們要用到的 HTML 結構：

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>
複製代碼

假設咱們想將第一個網格項目 .item1 放置到第二行並佔據第二列。那麼，這個項目要從第二根行線開始，延伸到第三根行線。一樣，它還要從第二根列線開始，延伸到第三跟列線。因而，咱們就獲得了下面的 CSS：

.item1 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}
複製代碼

簡寫屬性

上面 .item1 的放置方位，還能夠用簡寫屬性重寫：

.item1 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
複製代碼

結果以下：

View on Codepen

隱含行

如今再次修改 .item1 的 grid-row 和 grid-column 屬性：

.item1 {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}
複製代碼

效果以下：

發現什麼了？.item1 跨越多個列，從第 1 根網格線到第 3 根；它還被放置在網格行線 3 和 4 之間，將會建立一個新行。這個新行是一個隱含行（implicit row），它的高度由網格容器的 grid-auto-rows 屬性控制。你能夠在 MDN 瞭解更多關於自動放置（auto-placement）的默認規則。

如今，讓咱們將這些新知識應用到工做中——建立一個基本佈局（basic layout）。

基本佈局

既然咱們已經學習瞭如何建立網格和在網格上放置項目，如今就來建立一個基本佈局。咱們不會在這裏引入任何新的概念。只是簡單使用 grid-row 和 grid-column 簡寫屬性來手動放置諸如頁眉、頁腳等頁面元素。

下面是本節中使用到的 HTML：

<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>
複製代碼

還有 CSS：

.container {
  display: grid;
  width: 750px;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
}

.header {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}

.sidebar {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}

.content-1 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

.content-2 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.content-3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.footer {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}
複製代碼

效果以下：

View on Codepen

grid-template-areas

在前面的示例中，咱們學習瞭如何使用網格線放置項目來建立基本佈局。放置項目還有另外一種方法，是使用命名網格區域，這須要藉助 grid-template-areas 和 grid-area 這兩個屬性。咱們仍是用前面的例子，不過此次使用 grid-template-areas 屬性從新改寫：

.container {
  display: grid;
  width: 100%;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header header"
      "sidebar content-1 content-1"
      "sidebar content-2 content-3"
      "footer footer footer";
}
複製代碼

這裏咱們定義了三列四行。使用 grid-template-areas 屬性來定義整個佈局，而不是一個一個項目的指定放置位置。而後，咱們再使用 grid-area 屬性將這些區域分配給每一個網格項目。

HTML 結構：

<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>
複製代碼

剩下的 CSS：

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.footer {
  grid-area: footer;
}
複製代碼

效果以下：

View on Codepen

命名網格線

在前面的示例中，咱們瞭解瞭如何經過 grid-column 和 grid-row 屬性爲項目指定佔據的網格線，從而在網格中實現項目的放置。其實，在定義網格時，咱們還能夠爲這些網格線命名，名稱放置在方括號 [] 裏。這樣，咱們也能使用命名網格線來放置項目了：

.container {
  display: grid;
  width: 100%;
  height: 600px;
  grid-gap: 1rem;
  grid-template-columns:
    [main-start sidebar-start] 200px
    [sidebar-end content-start] 1fr
    [column3-start] 1fr
    [content-end main-end];
  grid-template-rows:
    [row1-start] 80px
    [row2-start] 1fr
    [row3-start] 1fr
    [row4-start] 100px
    [row4-end];
}
複製代碼

如今有了命名網格線，咱們就能夠使用這些名稱放置項目了。接下來，咱們重寫以前基本佈局的樣式，使用命名網格線（named lines），而不是網格線號（line numbers）:

.header {
  grid-column: main-start / main-end;
  grid-row: row1-start / row2-start;
}

.sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: row2-start / row4-start;
}

.content-1 {
  grid-column: content-start / content-end;
  grid-row: row2-start / row3-start;
}

.content-2 {
  grid-column: content-start / column3-start;
  grid-row: row3-start / row4-start;
}

.content-3 {
  grid-column: column3-start / content-end;
  grid-row: row3-start / row4-start;
}

.footer {
  grid-column: main-start / main-end;
  grid-row: row4-start / row4-end;
}
複製代碼

這裏是使用的 HTML 結構：

<div class="container">
  <div class="item header">header</div>
  <div class="item sidebar">sidebar</div>
  <div class="item content-1">Content-1</div>
  <div class="item content-2">Content-2</div>
  <div class="item content-3">Content-3</div>
  <div class="item footer">footer</div>
</div>
複製代碼

效果以下：

View on Codepen

更多學習資源

但願這個簡短的系列教程爲你提供了開始嘗試和構建 CSS 網格佈局所需的知識。CSS 網格佈局功能很強大，咱們只講了點基礎的知識。

若是你準備更深刻地探索和學習，這裏有大量的資源供你學習。

Jen Simmons

Jen Simmons 是 Mozilla 的設計師倡導者。她也是一名開發人員、做家和演說家，也是 CSS 工做組成員。

• jensimmons.com
• twitter

Rachel Andrew

Rachel Andrew 是一名開發人員、演說家和做家。她是 CSS 工做組的一名成員，寫了不少關於如何學習 CSS 網格佈局的教程。

• gridbyexample.com
• twitter

MDN

MDN 爲 CSS 網格佈局的每一個特性提供了全面的教程和文檔。

• MDN

（完）

---

廣告時間（長期有效）

我有一位好朋友開了一間貓舍，在此幫她宣傳一下。如今貓舍裏養的都是布偶貓。若是你也是個愛貓人士而且有須要的話，不妨掃一掃她的【閒魚】二維碼。不買也沒關係，看看也行。

瞄~