CSS 網格 Gird 布局

建立網格 Gird

通過将屬性

display

的值設為

grid

，HTML 元素就可以變為網格容器。

注意：在 CSS 網格中，父元素稱為容器（container），它的子元素稱為項（items）。

#container {
  display: grid;
}

列，行 Column Row

在一個網格容器中使用

grid-template-columns

屬性可以添加一些列，示例如下：

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

上面的代碼會在網格容器中添加兩列，寬度均為 50px。

grid-template-columns

屬性值的個數表示網格的列數，每個值表示相應的列寬度。

建立的網格會自動設定行數。要手動調整行，使用

grid-template-rows

屬性。

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

機關 Unit

在 CSS 網格中，可以使用絕對機關（如

px

）或相對機關（如

em

）來定義行或列的大小。下面的機關也可以使用：

fr

：設定列或行占剩餘空間的比例，

auto

：設定列寬或行高自動等于它的内容的寬度或高度，

：将列或行調整為它的容器寬度或高度的百分比，

grid-template-columns: 1fr 100px 2fr;

間距 Gap

如果需要在列與列之間添加一些間距，我們可以使用

grid-column-gap

grid-column-gap: 20px;

還可以用

grid-row-gap

設定行間距。

grid-row-gap: 5px;

grid-gap

屬性是前兩個挑戰中出現的

grid-row-gap

和

grid-column-gap

的簡寫屬性，它更友善使用。如果

grid-gap

隻有一個值，那麼這個值表示行與行之間、列與列之間的間距均為這個值。

如果有兩個值，那麼第一個值表示行間距，第二個值表示列間距

grid-gap: 10px 20px;

空間大小 Spacing

到目前為止，所有的讨論都是圍繞網格容器的。

grid-column

屬性是用于網格項本身的屬性。

網格中，假想的水準線和垂直線被稱為線（lines）。這些線在網格的左上角從 1 開始編号，垂直線向右、水準線向下累加計數。

要設定一個網格項占據幾列，使用

grid-column

屬性加上網格線條的編号來定義網格項開始和結束的位置。

grid-column: 2 / 4;

也可以設定它占用多行。使用

grid-row

屬性來定義一個網格項開始和結束的水準線。

grid-row: 2 / 4;

對齊 Align

在 CSS 網格中，每個網格項的内容分别位于被稱為單元格（cell）的框内。使用網格項的

justify-self

屬性，設定其内容的位置在單元格内沿水準軸的對齊方式。預設情況下，這個屬性的值是

stretch

，這将使内容占滿整個單元格的寬度。該 CSS 網格屬性也可以使用其他的值：

start

：使内容在單元格左側對齊，

center

：使内容在單元格居中對齊，

end

：使内容在單元格右側對齊

justify-self: center;

正如能設定網格項沿水準方向的對齊方式一樣，我們也可以設定網格項沿豎直方向的對齊方式。為此，可以對網格項使用

align-self

屬性來實作。

align-self: end;

CSS 網格中的網格項共享對齊方式。可以分别設定它們的對齊方式，也可以對網格容器使用

justify-items

使它們一次性沿水準軸對齊。這個屬性能接受之前兩個中學到的所有值作為屬性值，但與之前不同的是，它會将網格中所有的網格項按所設定的方式對齊。

justify-items: center;

對網格容器使用

align-items

屬性可以讓網格中所有的網格項沿豎直方向對齊。

align-items: end;

分區 Area

可以将網格中的一些單元格組合成一個區域（area），并為該區域指定一個自定義名稱。可以通過給容器加上

grid-template-areas

來實作：

grid-template-areas:
  "header header header"
  "advert content content"
  "advert footer footer";

在為網格添加區域模闆後，可以通過引用所定義的區域的名稱，将元素放入相應的區域。為此，需要對網格項使用

grid-area

：

.item1 {
  grid-area: header;
}

grid-area

屬性還有另一種使用方式。如果網格中沒有定義區域模闆，也可以像這樣為它添加一個模闆：

item1 { grid-area: 1/1/2/4; }

上例中數字代表這些值：

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

重複 Repeat

使用

repeat

方法指定行或列的重複次數，後面加上逗号以及需要重複的值。

grid-template-columns: repeat(2,1fr,50px) 20px;

限制項目大小 Limit Item Size

内置函數

minmax

也可用于設定

grid-template-columns

和

grid-template-rows

的值。它的作用是在網格容器改變大小時限制網格項的大小。為此，需要指定網格項允許的尺寸範圍。

grid-template-columns: 100px minmax(50px, 200px);

自動填充 Auto Fill

repeat 方法帶有一個名為自動填充（auto-fill）的功能。它的功能是根據容器的大小，盡可能多地放入指定大小的行或列。可以通過結合

auto-fill

和

minmax

來更靈活地布局。

grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));

grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));

嵌套網格 Nested Grid

display: grid;
grid-template-columns: auto 1fr;

CSS 網格 Gird 布局