Grid布局詳解

1.簡介：　

　　　CSS網格布局（又稱“網格”），是一種二維網格布局系統。CSS在處理網頁布局方面一直做的不是很好。一開始用的是table（表格）布局，然后用float(浮動)，position（定位）和inline-block（行內塊）布局，但是這些方法本質上是hack，遺漏了很多功能，例如垂直居中。后來出了fixbox(彈性布局)，解決了很多布局問題，但是它僅僅是一維布局，而不是復雜的二維布局，實際上它們（flexbox與grid）能很好的配合使用。Grid布局是第一個專門為解決布局問題而創建的CSS模塊。

 

2.grid布局

　　 設置在網格容器上的屬性　

　　　　1. display: grid | inline-grid | subgrid;

　　　　　　屬性值：

　　　　　　grid: 生成塊級網格

　　　　　　inline-grid: 生成行內網格
　　　　　　subgrid: 如果網格容器本身是網格項（嵌套網格容器），此屬性用來繼承其父網格容器的列、行大小。

　　　　　　注：當元素設置了網格布局，column、float、clear、vertical-align屬性無效。

　　　　2. grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
　　　　　grid-template-rows: <track-size> ... | <line-name> <track-size> ... ;

　　　　　　設置行和列的大小，在行軌道或列軌道兩邊是網格線。

　　　　　　屬性值：
　　　　　　track-size: 軌道大小，可以使用css長度，百分比或用分數（用fr單位）。
　　　　　　line-name: 網格線名字，你可以選擇任何名字。

　　　　　　當你設置行或列大小為auto時，網格會自動分配空間和網格線名稱。

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

　　　　　　

 

 　　　　　　你也可以給網格線定義名字，注意名字需要寫在[]里面。

.container{
    display:grid;
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

　　　　　

 　　　　　　每條網格線可以有多個名字，例如上面行的第二條線有兩個名字，分別是row1-end和row2-start。

.container{
    display:grid;
    grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

　　　　　　如果你定義包含重復部分，可以使用repeat()簡化。

.container{
    display:grid;
    grid-template-columns: repeat(3, 20px [col-start]) 5%;
}
同下
.container{
    display:grid;
    grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

　　　　　　用fr單位可以將容器分為幾等份，例如下面分成三等份。

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

　　　　　　如果fr單位和實際值一起使用，設置fr的行或列將分(除了實際值)剩余部分。

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

　　　3.grid-template-areas　

　　　　　　通過獲取網格項中的grid-area屬性值（名稱），來定義網格模版。重復網格區（grid-area）名稱將跨越網格單元格，‘.’代表空網格單元。

　　　　　　屬性值：
　　　　　　grid-area-name: 網格項的grid-area屬性值（名字）
　　　　　　‘.’ : 空網格單元
　　　　　　none: 不定義網格區域

.item-a{
  grid-area: header;
}
.item-b{
  grid-area: main;
}
.item-c{
  grid-area: sidebar;
}
.item-d{
  grid-area: footer;
}
.container{
    display:grid;
    grid-template-columns: 50px 50px 50px 50px;
    grid-template-rows: auto;
    grid-template-areas: "header header header header"
                         "main main . sidebar"
                         "footer footer footer footer"
}

　　　　　　上面代碼示例會創建四列三行網格，第一行將是header，第二行前兩個網格單元是main部分、第三個為空網格單元、第四個為sliderbar，第三行是footer。

　　　4. grid-column-gap：<line-size>; 和 grid-row-gap: <line-size> ;　（網格單元格間距）

　　　　　　line-size: 網格線間距,設置單位值

.container{
    display:grid;
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px; 
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}

　　　　　　注：間隔僅僅作用在網格單元之間，不作用在容器邊緣。

　　　5. grid-gap;

　　　　　　是grid-column-gap 和 grid-row-gap簡寫。

.container{
    display:grid;
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px; 
    grid-gap: 10px 15px;
}

　　　　　　注：如果只設置一個值，那么grid-column-gap 和 grid-row-gap都為那個值。

　　　6. justify-items: start | end | center | stretch（默認）

　　　　　　　　垂直於列網格線對齊，適用於網格容器里的所有網格項。

　　　　　　屬性值：
　　　　　　　　start: 左對齊。
　　　　　　　　end: 右對齊。
　　　　　　　　center: 居中對齊。
　　　　　　　　stretch: 填滿（默認）。　

　　　7. align-items: start | end | center | stretch 　　　　　　　　

　　　　　　　　垂直於行網格線對齊，適用於網格容器里的所有網格項。

　　　　　　屬性值：
　　　　　　　　start： 頂部對齊。
　　　　　　　　end： 底部對齊。
　　　　　　　　center： 居中對齊。
　　　　　　　　stretch：填滿（默認）。

　　　8. justify-content: start | end | center | stretch | space-around | space-between | space-evenly

　　　　　　如果用像px非彈性單位定義的話，總網格區域大小有可能小於網格容器，這時候你可以設置網格的對齊方式（垂直於列網格線對齊）。

　　　　　　屬性值：
　　　　　　　　 start: 左對齊。
　　　　　　　　 end: 右對齊。
　　　　　　　　 center: 居中對齊。
　　　　　　　 　stretch: 填滿網格容器。
　　　　　　　　 space-around: 網格項兩邊間距相等，網格項之間間隔是單側的2倍。
　　　　　　　　 space-between: 兩邊對齊，網格項之間間隔相等。
　　　　　　　　 space-evenly: 網格項間隔相等。

　　　9. align-content: start | end | center | stretch | space-around | space-between | space-evenly 

　　　　　　如果用像px非彈性單位定義的話，總網格區域大小有可能小於網格容器，這時候你可以設置網格的對齊方式（垂直於行網格線對齊）。　　　　　

　　　　　　屬性值：
　　　　　　　　 start: 頂部對齊。
　　　　　　　　 end: 底部對齊。
　　　　　　　　 center: 居中對齊。
　　　　　　　　 stretch: 填滿網格容器。
　　　　　　　　 space-around: 網格項兩邊間距相等，網格項之間間隔是單側的2倍。
　　　　　　　　 space-between: 兩邊對齊，網格項之間間隔相等。
　　　　　　　　 space-evenly: 網格項間隔相等。

　　　10. grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... 

　　　　　　自動生成隱式網格軌道（列和行），當你定位網格項超出網格容器范圍時，將自動創建隱式網格軌道

　　　　　　屬性值：
　　　　　　　　track-size: 網格軌道大小,可以是固定值，百分比或者是分數（fr單位）。

　　　11. grid-auto-flow : row（默認） | column | dense 

　　　　　　在沒有設置網格項的位置時，這個屬性控制網格項怎樣排列。

　　　　　　屬性值：
　　　　　　　　row: 按照行依次從左到右排列。
　　　　　　　　column: 按照列依次從上到下排列。
　　　　　　　　dense: 按先后順序排列。

　　　12. grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ]

　　　　　　是一種簡寫形式，設置網格容器所有屬性。

　　　　　　屬性值：
　　　　　　　　none: 設置為所有屬性的默認值。
　　　　　　　　<grid-template-rows> / <grid-template-columns>: 設置行和列的值，其他屬性為默認值。
　　　　　　　　<grid-auto-flow> [ <grid-auto-rows> [ / <grid-auto-columns>] ] : 設置網格自動流、網格自動行、網格自動列的值，其他未設置則為默認值。

　　 設置在網格項上的屬性　

　　　　 1.

 　　　　　　 grid-column-start: <number> | <name> | span <number> | span <name> | auto ;
   　　　　　　grid-column-end: <number> | <name> | span <number> | span <name> | auto ;
    　　　　　　grid-row-start: <number> | <name> | span <number> | span <name> | auto ;
    　　　　　　grid-row-end: <number> | <name> | span <number> | span <name> | auto ;

　　　　　　　　　　通過網格線來定義網格項的位置。grid-column-start、grid-row-start定義網格項的開始位置，grid-column-end、grid-row-end定義網格項的結束位置。

　　　　　　　屬性值：
　　　　　　　　　　 line: 指定帶編號或者名字的網格線。
　　　　　　　　　　 span <number>: 跨越軌道的數量。
　　　　　　　　　　 span <name>: 跨越軌道直到對應名字的網格線。
　　　　　　　　　　 auto: 自動展示位置，默認跨度為1。

　　　　　　　注：如果未聲明grid-column-end或grid-row-end，默認將跨越一個軌道。項目也可以重疊，設置z-index來確定堆疊順序。

　　　　2. grid-column: <start-line> / <end-line> | <start-line> / span <value> ;
     　　　   grid-row: <start-line> / <end-line> | <start-line> / span <value> ;

　　　　　　　　是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的簡寫。　　

　　　　3. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;

　　　　　　　　定義網格項名字，以便創建模塊（容器屬性grid-template-areas來定義模塊）。

　　　　　　　　屬性值：
　　　　　　　　　　name: 項目名子。
　　　　　　　　　　<row-start> / <column-start> / <row-end> / <column-end>: 可以是數字或網格線名字。

　　　　4. justify-self: justify-self: start | end | center | stretch;

　　　　　　　　定義單個網格項垂直於列網格線的對齊方式。

　　　　　　　　屬性值：
　　　　　　　　　　start: 網格區域左對齊。
　　　　　　　　　　end: 網格區域右對齊。
　　　　　　　　　　center: 網格區域居中。
　　　　　　　　　　stretch: 網格區域填滿。

　　　　　　　　提示：也可以在容器上設置justify-items，達到全部網格項對齊。　

　　　　5. align-self: start | end | center | stretch;

　　　　　　　　定義單個網格項垂直於行網格線的對齊方式。

　　　　　　　　　屬性值：
　　　　　　　　　　　　start: 網格區域頂部對齊。
　　　　　　　　　　　　end: 網格區域底部對齊。
　　　　　　　　　　　　center: 網格區域居中。
　　　　　　　　　　　　stretch: 網格區域填滿。

　　　　　　　　　提示：也可以在容器上設置align-items，達到全部網格項對齊。