grid布局 - 簡書

grid布局簡單介紹

CSS網格布局（又名“網格”）是一個二維的基于網格的布局系統(tǒng)蓬豁，其目的只在于完全改變我們設計基于網格的用戶界面的方式。 CSS一直用來布局網頁谤碳，但一直都不完美材泄。一開始我們使用table 做布局悠鞍，然后轉向浮動染簇、定位以及inline-block参滴，但所有這些方法本質上都是 Hack 的方式，并且遺漏了很多重要的功能（例如垂直居中）锻弓。 Flexbox的出現在一定程度上解決了這個問題砾赔，但是它的目的是為了更簡單的一維布局，而不是復雜的二維布局（Flexbox和Grid實際上一起工作得很好）。只要我們一直在制作網站过蹂，我們就一直在為解決布局問題不斷探索十绑，
而Grid是第一個專門為解決布局問題而生的CSS模塊聚至。一開始你需要使用display：grid把容器元素定義為一個網格酷勺，使用grid-template-columns和grid-template-rows設置列和行大小，然后使用grid-column和 grid-row把它的子元素放入網格扳躬。與flexbox類似脆诉，網格子元素的原始順序不重要。你的可以在 CSS 里以任意順序放置它們贷币，這使得使用媒體查詢重新排列網格變得非常容易击胜。想象一下，我們需要定義整個頁面的布局役纹，然后為了適應不同的屏幕寬度完全重新排列偶摔，我們只需要幾行CSS就能實現這個需求。網格是有史以來最強大的CSS模塊之一促脉。

瀏覽器支持

瀏覽器兼容

基本概念

Grid Container:設置了 display: gird 的元素辰斋。這是所有grid item 的直接父項。
Grid Item:是Grid 容器的孩子（直接子元素）瘸味。
Grid Line:作為分界線組成網格結構宫仗。它們既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”）旁仿，并位于行或列的任一側藕夫。
Grid Track:兩個相鄰網格線之間的空間。你可以把它們想象成網格的列或行枯冈。
Grid Cell:兩個相鄰的行和兩個相鄰的列網格線之間的空間毅贮。它是網格的一個“單元”。
Grid Area:四個網格線包圍的總空間尘奏。網格區(qū)域可以由任意數量的網格單元組成滩褥。

Grid 屬性列表

父親Grid Container 的全部屬性

display
作用：將元素定義為 grid contaienr，并為其內容建立新的網格格式化上下文(grid formatting context)罪既。

.container {
  display: grid | inline-grid | subgrid;
}

grid-template-columns
grid-template-rows

//使用以空格分隔的多個值來定義網格的列和行铸题。這些值表示軌道大小(track size)，它們之間的空格代表表格線(grid line)琢感。
.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}
//(如果未顯示的給網格線命名)丢间，軌道值之間僅僅有空格時，網格線會被自動分配數字名稱：
.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}
//也可以給網格線指定確切的命名
.container {
  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];
}

grid-template-areas
作用：通過引用 grid-area屬性指定的網格區(qū)域的名稱來定義網格模板驹针。重復網格區(qū)域的名稱導致內容擴展到這些單元格烘挫。點號表示一個空單元格。語法本身提供了網格結構的可視化。

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  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";
}
//.代表單個空單元格
//聲明中的每一行都需要有相同數量的單元格

上述代碼創(chuàng)建的網格如下圖

grid-template-areas

grid-template
作用：在單個聲明中定義 grid-template-rows饮六、grid-template-columns其垄、grid-template-areas 的簡寫。

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}
//上述代碼等價于
.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

grid-column-gap和 grid-row-gap
作用：指定網格線的大小卤橄，你可以把它想象為設置列/行之間的間距的寬度绿满。

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}
//舉個例子
.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

上述代碼創(chuàng)立的網格如下圖

網格線大小

grid-gap
作用：grid-row-gap 和 grid-column-gap 的縮寫

//基本語法
.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}
//舉個例子
.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 10px 15px;
}

justify-items
作用：沿著行軸對齊網格內的內容（與之對應的是 align-items, 即沿著列軸對齊），該值適用于容器內的所有的 grid items窟扑。

//基本語法
.container {
  justify-items: start | end | center | stretch;
}
//舉個例子
.container {
  justify-items: start;
}
.container{
  justify-items: end;
}
.container {
  justify-items: center;
}
.container {
  justify-items: stretch;
}

上述代碼的四個例子

start

end

center

stretch

align-items
作用：沿著列軸對齊grid item 里的內容（與之對應的是使用 justify-items 設置沿著行軸對齊）喇颁，該值適用于容器內的所有 grid items。

//基本語法
.container {
  align-items: start | end | center | stretch;
}
//舉個例子
.container {
  align-items: start;
}
.container {
  align-items: end;
}
.container {
  align-items: center;
}
.container {
  align-items: stretch;
}

上述代碼的四個例子

start

end

center

stretch

justify-content
作用：有時嚎货，網格的總大小可能小于其網格容器的大小橘霎。如果你的所有 grid items 都使用像px這樣的非彈性單位來設置大小，則可能發(fā)生這種情況殖属。此時姐叁，你可以設置網格容器內的網格的對齊方式。此屬性沿著行軸對齊網格（與之對應的是 align-content, 沿著列軸對齊）洗显。

//基本語法
.container {
  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;  
}

上述代碼的七個例子

start

end

center

stretch

space-around

space-between

space-evenly

align-content
作用：有時外潜，網格的總大小可能小于其網格容器的大小。如果你的所有 grid items 都使用像px這樣的非彈性單位來設置大小墙懂，則可能發(fā)生這種情況橡卤。此時，你可以設置網格容器內的網格的對齊方式损搬。此屬性沿著列軸對齊網格（與之對應的是 justify-content, 即沿著行軸對齊）碧库。

//基本語法
.container {
  align-content: start | end | center | stretch | space-around | space-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;  
}

上述代碼的七個例子

start

end

center

stretch

space-around

space-between

space-evenly

grid-auto-columns和grid-auto-rows
作用：指定自動生成的網格軌道（又名隱式網格軌道）的大小。隱式網格軌道在你顯式的定位超出指定網格范圍的行或列（使用 grid-template-rows/grid-template-columns）時被創(chuàng)建巧勤。

//基礎語法
.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}
//舉例說明
//代碼1
.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}
//代碼2
.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
//代碼3
.container {
  grid-auto-columns: 60px;
}

代碼1創(chuàng)建的網格

代碼2創(chuàng)建的網格

代碼3創(chuàng)建的網格

grid-auto-flow
作用：如果你存在沒有顯示指明放置在網格上的 grid item嵌灰，則自動放置算法會自動放置這些項目。而該屬性則用于控制自動布局算法的工作方式颅悉。
grid
作用：在單個屬性中設置所有以下屬性的簡寫：grid-template-rows沽瞭，grid-template-columns，grid-template-areas剩瓶，grid-auto-rows驹溃，grid-auto-columns和grid-auto-flow。它同時也將 sets grid-column-gap 和 grid-row-gap 設置為它們的初始值延曙，即使它們不能被此屬性顯示設置豌鹤。
它也可用使用一個更復雜但相當方便的語法來一次設置所有內容。你可以指定 grid-template-areas枝缔、grid-template-rows 以及grid-template-columns布疙，并將所有其他子屬性設置為其初始值。你現在所做的是在其網格區(qū)域內，指定網格線名稱和內聯軌道大小灵临。

兒子Grid Items 的全部屬性

grid-column-start grid-column-end grid-row-start grid-row-end
作用：使用特定的網格線確定 grid item 在網格內的位置截型。grid-column-start/grid-row-start 屬性表示grid item的網格線的起始位置，grid-column-end/grid-row-end屬性表示網格項的網格線的終止位置儒溉。

//基本語法
.item {
  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
}
//例子1
.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}
//例子2
.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

例子1所建立的網格

例子2所建立的網格

grid-column和grid-row
作用：grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end 的簡寫形式宦焦。

//基礎語法
.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
//舉個例子
.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

簡寫模式下建立的網格

grid-area
作用：給 grid item 進行命名以便于使用 grid-template-areas 屬性創(chuàng)建模板時來進行引用。另外也可以做為 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
}
.item-d {
  grid-area: 1 / col4-start / last-line / 6
}

簡寫模式下創(chuàng)建的網格

justify-self
作用：沿著行軸對齊grid item 里的內容（與之對應的是 align-self, 即沿列軸對齊）赶诊。此屬性對單個網格項內的內容生效笼平。

.item-a {
  justify-self: start;
}
.item-a {
  justify-self: end;
}
.item-a {
  justify-self: center;
}
.item-a {
  justify-self: stretch;
}

start

end

center

stretch

align-self
作用：沿著列軸對齊grid item 里的內容（與之對應的是 justify-self, 即沿行軸對齊）园骆。此屬性對單個網格項內的內容生效。

//基本語法
.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;
}

start

end

center

stretch