CSS Gird 佈局 指南

CSS Grid Layout

原文地址： https://css-tricks.com/snippets/css/complete-guide-grid/

簡介

CSS網格佈局是一個二維的基於網格的佈局系統, 其目的在於徹底改變咱們設計基於網絡的用戶界面的方式。CSS一直用來佈局咱們的網頁, 可是他歷來沒有作過很好的工做, 最開始咱們使用表格,而後float, position和inline-block。可是這些本質上是css的hack, 而且遺漏了不少重要的功能(例如垂直居中),後來flexbox出現了, 可是他的目的只是爲了更簡單的一維佈局, 而不是複雜的二維佈局。網格是第一個專門爲解決佈局問題而建立的CSS模塊 在瀏覽器兼容性方面,能夠看一下caniuse的數據

網格容器

在元素中應用display: grid。這是全部網格佈局的直接父元素, 在這個例子中container是網格容器

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>
複製代碼

網格項目

網格容器的小孩(例如直接子元素),這裏的item元素是網格項目,但sub-item不是

<div class="container">
  <div class="item"></div>
  <div class="item">
    <div class="sub-item"></div>
  </div>
  <div class="item"></div>
</div>
複製代碼

網格線

構成網格結構的分界線, 他們既能夠是垂直的(列)也能夠是水平的(行)。這裏的黃線是一個列網格線的例子

網格軌道

兩個相鄰網格線之間的空間。你能夠把它們想象成網格的列或行。這是第二行和第三行網格線之間的網格軌道

網格單元格

兩個相鄰的行和兩個相鄰的列網格線之間的空間,也就是網格中的一個單元,這是行網格線1和2之間的網格單元, 以及列網格線2和3

網格空間

四個網格線包圍的總空間,網格空間能夠由任意數量的網格單元組成。這裏是行網格線1和3之間的網格空間, 以及列網格線1和3

網格容器的屬性

display

將元素定義爲網格容器, 並未其內容創建新的網格格式上下文 值：

• gird: 生成塊級網格
• inline-grid: 生成內聯網格
• subgrid: 若是你的網格容自己是一個網格項目(即嵌套網格), 你可使用這個屬性來代表你想繼承他父母的行/列而不是他本身的。

.container{
  display: grid | inline-grid | subgrid
}
複製代碼

grid-template-columns, grid-template-rows

使用空格分隔的值列表來定義網格的列和行。這些值表示軌道大小,他們之間的空間表示網格線 值:

• : 能夠是網格中的空閒空間的長度,百分比, 或分數
• : 線的名稱 例如, 在網格軌跡之間流出空白區域時, 網格線會自動分配數字名稱

.container{
  display: grid;
  grid-template-columns: 40px 50px auto 50px;
  grid-template-rows: 25% 100px auto;
}
複製代碼

可是你能夠選擇明確命名行,請注意行名稱的括號語法

.container{
  grid-template-columns: [first] 40px [line2] 50px [line2] auto [line3] auto [col4-start] 50px [five] 5px; 
  grid-template-rows: [row1-start] 25% [row1-end] 100px [thrid-line] auto [last-line];
}
複製代碼

請注意,一行/列能夠有多個名字,例如這裏第二列將有兩個名字

.contaienr{
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]
}
複製代碼

若是您的定義包含重複的部分,您可使用repeat()符號來簡化

.container{
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}
複製代碼

至關於這個

.container{
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}
複製代碼

設置單位爲fr網格會容許您設置的網格軌道大小爲網格容器的自由空間的一小部分,例如,這會將每一個項目設置爲容器寬度的三分之一

.container {
  grid-template-columns: 1fr 1fr 1fr;
}
複製代碼

可用空間是在任何非彈性項目以後計算的,在這個例子中,fr單元可用空間的總量不包括50px

.container{
  grid-template-columns: 1fr 50px 1fr 1fr;
}
複製代碼

grid-template-areas

經過應用grid-area屬性指定網格空間的名稱來定義網格模板。 值:

• : 指定的網格空間的名稱grid-area
• .: 表示一個空的網格單元
• none: 沒有定義網格空間

.container{
  grid-template-areas: "<grid-area-name> | . | none | ...";
}
複製代碼

例子

.container{
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . slidebar"
    "footer footer footer footer"
}
.item-a{
  grid-area: header;
}
.item-b{
  grid-area: main;
}
.item-c{
  grid-area: slidebar;
}
.item-d{
  grid-area: footer;
}
複製代碼

注意: 你不是用這個語法命名行只是空間, 當你使用這種語法時, 空間兩端的行其實是自動命名的,若是你的網格空間名字是foo,那麼這個空間的起始行和起始列的名字就是foo-start,最後一列和最後一行就是foo-end;

grid-template

一個簡短設置grid-template-rows, grid-template-columns和grid-template-areas在一塊兒的聲明

.container {
  grid-template: none | subgrid | <grid-template-rows> <grid-area-name>/ <grid-template-columns>;
}
複製代碼

因爲grid-template不會重置隱式網格屬性(grid-auto-columns, grid-auto-rows, grid-auto-flow),這多是您在大多數狀況下所要作的,因此建議使用grid屬而不是grid-template。

grid-column-gap grid-row-gap

指定網格線的大小 值:

• : 長度值

.container{
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}
複製代碼

.container{
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: repeat(4, 80px);
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}
複製代碼

grid-gap

一種速記grid-row-gap和grid-column-gap 值:

• : 長度值

.container {
  grid-gap: <grid-row-gap><grid-column-gap>
}
複製代碼

justify-items

沿着行軸對齊網格內的內容(而不是align-items沿着列軸對齊),適用於全部網格容器內的網格項目 值:

• start: 將內容對齊到網格區域的左端
• end: 將內容對齊到網格區域的右端
• center: 將網格區域中心的內容對齊
• stretch: 填充網格區域的整個寬度

.container{
  justify-items: start | end | center | stretch
}
複製代碼

例子

.container{
  justify-items: start;
}
複製代碼

.container{
  justify-items: end;
}
複製代碼

.container{
  justify-items: center;
}
複製代碼

.container{
  justify-items: stretch;
}
複製代碼

此行爲也能夠經過justify-self在個別網格項目上設置

align-items

沿列軸對齊網格的內容(而不是justify-items沿着行軸對齊)。該值適用於容器內的全部網格項目 值:

• start: 將內容對齊到網格空間的頂部
• end: 將內容對齊到網格空間的底部
• center: 將內容對齊到網格空間的中心
• stretch: 填充網格空間的整個高度

.container {
  align-items: start | end | center | stretch;
}
複製代碼

例子

.container {
  align-items: start;
}
複製代碼

.container {
  align-items: end;
}
複製代碼

.container {
  align-items: center;
}
複製代碼

.container {
  align-items: stretch;
}
複製代碼

此行爲也能夠經過 align-self屬性在個別網格項目上設置

justify-content

有時,網格的總大小可能小於其網格容器的大小, 若是您的全部網格項目都是用非靈活單位進行大小調整,就可能發生這種狀況。這時候能夠設置網格容器內的網格的對齊方式,此屬性沿着行軸對齊網絡 值:

• start: 將網格對齊到網格容器的左端
• end: 將網格對齊到網格容器的右端
• center: 將網格對齊到網格容器的中心
• stretch: 調整網格的大小以容許網格填充網格容器的整個寬度
• space-around: 在每一個網格項目之間分配一個均勻的空間,在兩個端分配一半的空間
• space-between: 在每一個網格項目之間分配一個均勻的空間,在兩個端沒有分配空間
• space-evenly:在每一個網格項目之間分配一個均勻的空間,包括兩個遠端 例子

.container{
  justify-content: start;
}
複製代碼

.container{
  justify-content: end;
}
複製代碼

.container{
  justify-content: center;
}
複製代碼

.container{
  justify-content: stretch
}
複製代碼

.container{
  justify-content: space-around;
}
複製代碼

.container{
  justify-content: space-between;
}
複製代碼

.container{
  justify-content: space-evenly;
}
複製代碼

align-content

此屬性和justify-content同樣,只不過是沿着列軸對齊網格 值:

• start: 將網格對齊到網格容器的頂部
• end: 將網格對齊到網格容器的底部
• cneter: 將網格對齊到網格容器的中心
• stretch: 調整網格項目的大小, 以容許網格項目填充網格容器的整個高度
• space-around: 在每一個網格項目之間分配均勻的空間,在兩端分配一半的空間
• sapce-between: 在每一個網格項目之間分配一個均勻的空間,在兩端沒有空間
• space-evenly: 在每一個項目之間分配一個均勻的空間, 包括兩端 例子：

.container{
  align-content: start;
}
複製代碼

.container{
  align-content: end
}
複製代碼

.container{
  align-content: center;
}
複製代碼

.container{
  align-content: stretch;
}
複製代碼

.container{
  align-content: space-around;
}
複製代碼

.container{
  align-content: space-between;
}
複製代碼

.container{
  align-content: space-evenly;
}
複製代碼

grid-auto-columns grid-auto-rows

指定任何自動生成的網格軌道的大小,當你明確聲明超出定義的網格空間的行或列(經過grid-template-rows / grid-template-columns)時間,會建立隱式網格軌道 值:

• : 能夠長度, 百分比, 或分數(使用fr單位) 如何建立隱式網格軌道, 例子:

.contaienr{
  display: grid;
  grid-template-columns: repeat(2, 60px);
  grid-template-rows: repeat(2, 90px);
}
複製代碼

這樣會建立一個2 X 2的網格

但如今若是你使用grid-column和grid-row定位你的網格項目是這樣的

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
複製代碼

咱們告訴item-b從第5行開始, 到第6行結束, 可是咱們沒有定義第5行或第6行, 由於咱們引用了不存在的行,因此建立了寬度爲0的隱式軌道來填補空白,咱們可使用grid-auto-columns和grid-auto-rows來指定這些隱式軌道的寬度

.container{
  grid-auto-columns: 60px;
}
複製代碼

grid-auto-flow

若是您沒有明確放置在網格上的網格項目,則自動分配算法會自動分配這些項目。該屬性控制自動分配算法的原理 值:

• column: 告訴自動分配算法依次填充每行,根據須要添加新行
• row: 告訴自動分配算法一次填充每列,根據須要添加新列
• dense: 告訴自動分配算法，若是以後出現較小的項目,則嘗試在網格中儘早填充空間 dense可能致使您的項目出現亂序 例子：

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>
複製代碼

你定義了一個五行兩列的網格,並設置grid-auto-flow爲row

.container{
  display: grid;
  grid-template-columns: repeat(5, 60px);
  grid-template-rows: repeat(2, 30px);
  grid-auto-flow: row;
}
複製代碼

將項目分配在網格容器上,只能爲其中的兩個項目分配空間

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}
複製代碼

若是將grid-auto-flow設置爲column

grid

簡寫爲全部設置下列屬性的單一聲明: grid-template-rows,grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns和grid-flow。

網格項目的屬性

grid-column-start, grid-column-end, grid-row-start,grid-row-end

經過引用特定的網格線來肯定網格內項目的位置。 值:

• : 能夠是一個數字來引用一個編號的網格線,或者一個名稱來引用一個命名的網格線
• span : 項目將跨越提供的網格軌道數量
• span : 項目將跨越, 直到與它提供的名稱命中
• auto: 自動分配

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}
複製代碼

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}
複製代碼

若是沒有grid-column-end/grid-row-end聲明, 該項目將默認跨越一個項目,項目能夠相互重疊,您可使用z-index來控制堆疊順序

grid-column, grid-row

簡寫爲grid-column-start+grid-column-end和grid-row-start+grid-row-end 值:

• /

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}
複製代碼

grid-area

爲項目提供一個名稱,以即可以經過使用grid-template-areas屬性建立的模板來引用他。或者屬性能夠用做grid-row-start+grid-column-start+grid-row-end+grid-column-end 值:

• : 你選擇的名稱
• / / / :能夠是數字或命名行

.item {
  grid-area:  <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
複製代碼

例子: 做爲項目分配名稱的一種方法

.item-d{
  grid-area: header;
}
複製代碼

做爲grid-row-start+ grid-column-start+ grid-row-end+ grid-column-end的簡寫：

.item-d {
  grid-area: 1 / col4-start / last-line / 6
}
複製代碼

justify-self

沿着行軸對齊網格的內容,此屬性適用與單個網格項目的內容 值:

• start: 將內容對齊到網格空間的左端
• end: 將內容對齊到網格空間的右端
• center: 將網格空間中心的內容對齊
• stretch: 填充網格空間的整個寬度

.item {
  justify-self: start | end | center | stretch;
}
複製代碼

例子:

.item-a {
  justify-self: start;
}
複製代碼

.item-a {
  justify-self: end;
}
複製代碼

.item-a {
  justify-self: center;
}
複製代碼

.item-a {
  justify-self: stretch;
}
複製代碼

align-self

沿列軸對齊網格內的內容,此值適用與單個網格項目內的內容 值

• start: 將內容對齊到網格空間的頂部
• end: 將內容對齊到網格空間的底部
• center: 將網格空間中心的內容對齊
• stretch: 填充網格空間的整個高度

.item {
  align-self: start | end | center | stretch;
}
複製代碼

例子:

.item-a {
  align-self: start;
}
複製代碼

.item-a {
  align-self: end;
}
複製代碼

.item-a {
  align-self: center;
}
複製代碼

.item-a {
  align-self: stretch;
}
複製代碼