（譯）一篇對css網格佈局的介紹

css3 Grid Layout 表格佈局是在css中強大的難以置信的佈局模塊。它是二維空間的，因此它能夠處理行和列

它有些相似於Flexbox，可是又有本質的差異。Flexbox一樣很強大，可是它主要是一維空間的。Flexbox能夠處理列或者行，Grid能夠同時處理二者。

綜合運用它們，能夠幫助咱們在css中實如今以前沒法想象的佈局

基礎知識

一、定義表格容器

Grid 佈局的開始都是開始於建立一個佈局容器，能夠經過在父元素聲明display:grid;。只要咱們這樣聲明瞭，這個父元素的全部直屬子元素就變成了表格項目。在這點上和Flexbox是相似的。你會注意到css Gird 全部的表格樣式都是定義到父元素上邊的。

.parent {
  display: grid;
}

如今全部直屬子元素都是表格項目了。而後這並無改變子元素的顯示方式，由於咱們只建立了一列。這裏咱們須要建立網格軌道來建立更多的列。一個網格軌道是相鄰網格線之間的空間，實質就是行或者列。在上圖中，每個列之間的每一個空間就是軌道。

二、添加行列

很是簡單，咱們可使用grid-template-columns和grid-template-rows屬性來添加列和行

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

如今咱們有了3列，並分別給了他們100px 100px 和 200px的寬度。若是咱們繼續添加子元素，新增長的元素的寬素會繼續按照100px 100px 和 200px的寬度順序

若是咱們想要在表格子元素之間插入一些空格，咱們應該怎麼作呢？grid-gap就是作這個的。

.parent {
  display: grid;
  grid-template-columns: 100px 100px 200px;
  grid-gap: 10px;
}

若是咱們願意的話，咱們還可使用grid-template-rows給每一行定義尺寸樣式。在下面的例子中，第一行高度是50px，第二行高度是200px，若是添加第三行的話高度就是50p x

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

那如何定義寬度可變的表格呢？

使用像素單位是無法作自適用的佈局的

其實咱們有fr這個單位，fr表明網格容器中可用空間的一小部分。因此咱們切換px到fr。

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

這裏表明三個意思

• 幾列寬度是相等的(一個份數)

• 列的寬度是可變的(屏幕寬度的一個份數)

• 表格寬度根據容器寬度和元素之間的間距計算出來的

注意：根據DRY原則，咱們使用grid-template-columns: repeat(3, 1fr)定義多個相等寬度的列

如何定義寬度不等的列

咱們能夠僅僅改變份數的個數

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 10px;
}

咱們一樣可使用混合單位。咱們可能想要一列寬度是固定的，其餘兩列寬度相等。那可能的定義以下

.parent {
  display: grid;
  grid-template-columns: 1fr 300px 1fr;
  grid-gap: 10px;
}

向容器內插入儘量多的網格元素

咱們須要使用auto-fill和auto-fit來完成這個。咱們把上文的grid-template-columns元素屬性改爲下面這樣子

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 10px;
}

auto-fill表示咱們想要的軌道重複的次數。跟repeat(3, 200px)不一樣的是咱們告訴網格容器儘量多的插入200px的軌道(即使沒有這麼多軌道，也會插入隱形的不可見的軌道，或者按照有這麼多軌道去佈局)

可是！咱們好像又回到了剛纔的問題了，咱們如何實現可變的佈局呢？每一列寬度都是固定的200px，當沒有足夠空間留給下一個元素的時候，下一個元素會自動切換到下一行。可是咱們想要的是佈滿剩下的空間。

添加可變寬度的功能咱們須要使用minmax。咱們能夠設置最小寬度200px最大寬度是一個份數的功能

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
}

這表明着咱們能夠看到儘量多的200px的軌道。可是, 若是有剩餘的空間, 它將在它們之間平均分佈。

大部分時間，這些元素的寬度是大於200px，這根據瀏覽器的寬度而決定。可是寬度並不會小於200px而且是可變和自適用噠！！！

最後的障礙

最後一個問題就是當全部的元素都在第一行的時候

使用auto-fill，Grid 建立儘量多的子元素放置在容器內。因此當沒有這麼多元素的時候，會在後面留下一塊空白。這在某一方面很實用，可是有時候咱們並不想留下這麼多空白，好比card佈局。

僅用3行css實現響應式佈局

咱們可使用auto-fit代替auto-fill解決上面提到的問題。auto-fit使用盡量多的元素代替軌道，這就表明着會充滿全部的空間。

auto-fill = 使用軌道充滿空間
auto-fit = 使用元素充滿空間

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

How amazing!!!

翻譯自 An introduction to CSS Grid