Css網格佈局-Grid佈局

Grid

概念

Grid佈局是一種二維佈局方法，可以在行和列中佈置內容。所以在任何網格中都有兩個軸，橫軸（即行軸，內聯）和縱軸（即列軸，塊）。

什麼是網格

網格是一組相交的水平線和垂直線，它定義了網格的列和行。咱們能夠將網格元素放置在與這些行和列相關的位置上

固定或彈性的軌道的大小

• 可使用固定的軌道尺寸建立網格，好比使用像素單位。
• 也可使用好比百分比或者fr(專門爲此目的建立的新單位)來建立有彈性尺寸的網格

網格容器

經過在元素上聲明 display：grid 或 display：inline-grid 來建立一個網格容器。一旦咱們這樣作，這個元素的全部直系子元素將成爲網格元素。

網格軌道

經過 grid-template-columns 和 grid-template-rows 屬性來定義網格中的行和列。這些屬性定義了網格的軌道。一個網格軌道就是網格中任意兩條線之間的空間。

fr單位

軌道可使用任何長度單位進行定義。
網格還引入了一個新的長度單位fr表明網格容器中可用空間的一等份。

在軌道清單中使用repeat()

有着多軌道的大型網格可以使用 repeat() 標記來重複部分或整個軌道列表。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

二者等價

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Repeat 語句能夠用於重複軌道列表中的一部分。在下面的例子中我建立了一個網格：它起始軌道爲20像素，接着重複了6個1fr的軌道，最後再添加了一個20像素的軌道。

.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}

隱式網格

若是在網格定義以外又放了一些東西，或者由於內容的數量而須要的更多網格軌道的時候，網格將會在隱式網格中建立行和列.
按照默認，這些軌道將自動定義尺寸，因此會根據它裏面的內容改變尺寸。
也能夠在隱式網格中用 grid-auto-rows 和 grid-auto-columns 屬性來定義一個設置大小尺寸的軌道。

軌道大小 和 minmax()

在設置一個顯式的網格或者定義自動建立的行和列的大小的時候，咱們也許想給網格一個最小的尺寸，確保他們能擴大到容納他裏面添加的內容。
網格用minmax()函數來解決這個問題。

網格線

當咱們定義網格時，咱們定義的是網格軌道，而不是網格線。Grid 會爲咱們建立編號的網格線來讓咱們來定位每個網格元素.
網格線的編號順序取決於文章的書寫模式。在從左至右書寫的語言中，編號爲 1 的網格線位於最左邊。在從右至左書寫的語言中，編號爲 1 的網格線位於最右邊。

跨軌道放置網格元素

使用了grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 屬性

網格單元

一個網格單元是在一個網格元素中最小的單位， 從概念上來說其實它和表格的一個單元格很像。

網格區域

網格元素能夠向行或着列的方向擴展一個或多個單元，而且會建立一個網格區域。網格區域的形狀應該是一個矩形 - 也就是說你不可能建立出一個相似於「L」形的網格區域。

網格間距

在兩個網格單元之間的 網格橫向間距 或 網格縱向間距 可以使用 grid-column-gap 和 grid-row-gap 屬性來建立，或者直接使用兩個合併的縮寫形式 grid-gap。

嵌套網格

一個網格元素能夠也成爲一個網格容器。

CSS屬性

display

• grid ：生成一個塊級網格
• inline-grid ：生成一個內聯網格
• subgrid ：嵌套網格

grid-template-columns

• 該屬性是基於 網格列. 的維度，去定義網格線的名稱和網格軌道的尺寸大小。
• 這些值表示 網格軌道(Grid Track) 大小，它們之間的空格表示網格線。

grid-template-rows

• 該屬性是基於 網格行 的維度，去定義網格線的名稱和網格軌道的尺寸大小。

grid-template-areas

• 該屬性是 grid areas 在CSS中的特定命名.
• 經過引用 grid-area 屬性指定的 網格區域(Grid Area) 名稱來定義網格模板。重複網格區域的名稱致使內容跨越這些單元格。一個點號（.）表明一個空的網格單元。這個語法自己可視做網格的可視化結構。

grid-template

• 用於定義 grid-template-rows ，grid-template-columns ，grid-template-areas 縮寫(shorthand)屬性。

grid-row-gap

• 設置行元素之間的間隙(gutter)大小

grid-column-gap

• 設置元素列之間的間隔(gutter)大小

grid-gap

• grid-row-gap 和 grid-column-gap 的縮寫語

justify-items

• 沿着 行軸線(row axis) 對齊 網格項(grid items) 內的內容
• justify-items: start | end | center | stretch;

align-items

• 沿着 列軸線(column axis) 對齊 網格項(grid items) 內的內容
• align-items: start | end | center | stretch;

demo

demo傳送地址