CSS Grid

Web頁(yè)面布局發(fā)展歷史

CSS Grid Layout是CSS為布局新增的一個(gè)網(wǎng)格布局的模塊泊窘，網(wǎng)格布局主要針對(duì)Web應(yīng)用程序開發(fā)箕慧。

Flex布局：基于軸線的一維布局
Grid布局：基于網(wǎng)格的二維布局

Flex彈性布局是軸線布局锅睛，需指定項(xiàng)目所針對(duì)軸線的位置芒澜，因此可看作是一維布局埋合。Grid網(wǎng)格布局則是將容器劃分為行和列以產(chǎn)生單元格揍异，然后指定項(xiàng)目所在單元格全陨，因此可以看作是二維布局。

Grid網(wǎng)格布局的核心理念與Flexbox彈性盒子類似衷掷，都是基于容器Container和容器中的項(xiàng)目Item烤镐。CSS網(wǎng)格（Grid）布局與彈性（Flexbox）一維布局不同之處在于，Grid是一個(gè)二維布局系統(tǒng)棍鳖，它可以同時(shí)處理行和列炮叶。通過將CSS規(guī)則應(yīng)用于父元素（Container碗旅，網(wǎng)格容器）和子元素（Items，網(wǎng)格項(xiàng)）可輕松使用網(wǎng)格布局镜悉。

CSS網(wǎng)格布局的目標(biāo)是完全改變基于網(wǎng)格的用戶界面的布局方式祟辟，之前使用表格（Table）、浮動(dòng)（Float）侣肄、定位（Position）旧困、內(nèi)嵌塊（Inline-Block）的布局方式本質(zhì)上都只是Hacks，他們會(huì)遺落很多重要的設(shè)置稼锅，比如垂直居中吼具。網(wǎng)格布局創(chuàng)建的結(jié)構(gòu)與使用古老的Table表格標(biāo)簽類似，只是Grid布局是在CSS中實(shí)現(xiàn)而非HTML中實(shí)現(xiàn)矩距。同時(shí)可使用媒體查詢根據(jù)不同上下文重新定義布局拗盒。對(duì)于響應(yīng)式設(shè)計(jì)從此不再擔(dān)心因?yàn)镠TML結(jié)構(gòu)而影響布局。Grid布局可讓現(xiàn)有布局脫離文檔流的限制锥债，也就是說陡蝇，HTML結(jié)構(gòu)無需根據(jù)設(shè)計(jì)稿從上往下布置，可以自由地更改頁(yè)面元素的位置哮肚。

雖然Flexbox彈性盒子的出現(xiàn)改善了布局方式登夫，但它的目標(biāo)是為了解決簡(jiǎn)單的一維布局，對(duì)于復(fù)雜的二維布局Grid網(wǎng)格布局則是專門為解決此類問題而創(chuàng)建的CSS模塊允趟。實(shí)際上Flexbox彈性盒子和Grid網(wǎng)格布局是可以協(xié)同工作完美配合的恼策。

例如：使用Grid網(wǎng)格布局定位頁(yè)面內(nèi)容，對(duì)齊標(biāo)頭組件潮剪，并將頁(yè)面變?yōu)轫憫?yīng)式涣楷。

定位頁(yè)面內(nèi)容
使用Grid的網(wǎng)格模板區(qū)域grid-template-areas，定義四個(gè)網(wǎng)格區(qū)域分別為header鲁纠、main总棵、sidebar、footer

<style>
.container{display:grid; grid-template-areas:"header header" "main sidebar" "footer footer"; grid-gap;60px;}
header{grid-area:header;}
.main{grid-area:main;}
.sidebar{grid-area:sidebar;}
footer{grid-area:footer;}
</style>

<header></header>
<section class="main"></section>
<aside class="sidebar"></aside>
<footer></footer>

將頁(yè)面變?yōu)轫憫?yīng)式
使用媒體查詢重新排列網(wǎng)格區(qū)域

@media (max-width:600px){
  .container{grid-template-areas:"header" "main" "sidebar" "footer"; grid-template-columns:1fr;}
}

對(duì)齊標(biāo)頭組件
在header中為了拆分導(dǎo)航和按鈕改含，需在header中為標(biāo)頭定義display:grid屬性情龄，并設(shè)置一個(gè)2列的網(wǎng)格，同時(shí)定義在對(duì)應(yīng)的邊界上捍壤。

header{display:grid; grid-template-columns:1fr 1fr;}
header nav{justify-self:start;}
header button{justify-self:end;}

完整代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid</title>
</head>
<body>
    <div class="container">
      <header>
        <nav>
          <div class="nav-item"><a href="#"><h1>Header</h1></a></div>
          <div class="nav-item"><a href="#">link</a></div>
        </nav>
        <button class="btn">button</button>
      </header>
      <section class="main">
        <h2 class="title">CSS Grid Layout</h2>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
        <img src="http://www.quanbaike.com/tool/picapi/2d/api.php">    
      </section>
      <aside class="sidebar">
        <h3>sidebar</h3>
      </aside>
      <footer>
        <h3>footer</h3>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      </footer>
  </div>
</body>
</html>

*{margin:0; padding:0; box-sizing:border-box;}
body{text-decoration:none; color:inherit;}
a{text-decoration:none; color:inherit;}
/*layout*/
.container{
  max-width:900px; margin:0 auto; padding:0 60px; background-color:#fafafa;
  display:grid; grid-template-areas:"header header" "main sidebar" "footer footer"; grid-template-columns:3fr 1fr; grid-gap:60px;
}
/*header*/
header{
  grid-area:header; padding:20px 0; color:#ef5350; 
  display:grid; grid-template-columns:1fr 1fr;
}
header nav{justify-self:start;}
header button{justify-self:end;}
.nav-item{display:inline-block; margin-right:15px;}
.btn{border:none; background-color:#ef5350; color:#fff; padding:8px 25px; cursor:pointer; text-transform:uppercase;}
/*main*/
.main{grid-area:main;}
.main .title{font-size:32px; margin-bottom:55px;}
.main .content{margin-bottom:50px;}
.main img{width:100%;}
/*sidebar*/
.sidebar{grid-area:sidebar; padding:20px; border:1px solid #a2a2a2;}
/*footer*/
footer{grid-area:footer; padding:20px 0; color:#ef5350; text-align:center;}
footer div{padding:10px; color:#777; font-size:12px;}

/*media*/
@media (max-width: 600px){
  .container{grid-template-areas:"header" "main" "sidebar" "footer"; grid-template-columns:1fr;}
}

網(wǎng)格結(jié)構(gòu)

使用Grid布局骤视，首先需要使用display:grid將父元素定義為一個(gè)網(wǎng)格容器，然后使用grid-template-rows和grid-template-column設(shè)置行和列的尺寸鹃觉。接著通過grid-row和grid-column將容器子元素放入其中专酗。

Grid布局與Flexbox相似之處在于尤蛮，網(wǎng)格項(xiàng)（Grid Item）的HTML源碼結(jié)構(gòu)的順序是不重要的溪北，CSS可以以任何順序放置它們做院，這使得媒體查詢（Media Queries）重新排列網(wǎng)格變得容易市框。可以通過定義整個(gè)頁(yè)面的布局佑笋，然后重新排列布局以使用不同的屏幕寬度翼闹。

網(wǎng)格

網(wǎng)格容器（Grid Container）
網(wǎng)格布局的節(jié)點(diǎn)區(qū)域，即應(yīng)用display:grid的元素蒋纬，是網(wǎng)格項(xiàng)（Grid Item）的直接父級(jí)猎荠。

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

網(wǎng)格項(xiàng)（Grid Item）
網(wǎng)格項(xiàng)是網(wǎng)格容器的直屬下級(jí)元素，網(wǎng)格容器內(nèi)部不采用網(wǎng)格定位的子元素蜀备，只能是頂級(jí)元素关摇。
網(wǎng)格線（Grid Line）
網(wǎng)格線是構(gòu)成網(wǎng)格系統(tǒng)的分界線或分割線，用來分隔容器的線碾阁，可分為水平網(wǎng)格線（row grid lines）和垂直網(wǎng)格線(column grid lines)输虱，用于將網(wǎng)格切分為行和列并定位網(wǎng)格項(xiàng)。

網(wǎng)格線

網(wǎng)格軌道（Grid Track）
網(wǎng)格軌道是指兩條相鄰網(wǎng)格線之間的空間瓷蛙，可見其想象成是網(wǎng)格的行或列悼瓮。

網(wǎng)格軌道

網(wǎng)格單元格（Grid Cell）
兩個(gè)相鄰行列網(wǎng)格線之間的交叉空間戈毒，行和列交叉形成單元格艰猬。單元格是網(wǎng)格系統(tǒng)中的一個(gè)單元。

網(wǎng)格單元格

網(wǎng)格區(qū)域（Grid Area）

網(wǎng)格區(qū)域是由任意數(shù)量的網(wǎng)格單元格組成的空間區(qū)域

網(wǎng)格區(qū)域

行：水平分割線分割成行埋市，n行需要n+1條水平分割線冠桃。
列：垂直分割線將容器分隔成列，n列需n+1條垂直分割線道宅。

網(wǎng)格項(xiàng)和單元格之間的區(qū)別

單元格和項(xiàng)目

例如：使用Grid網(wǎng)格布局實(shí)現(xiàn)圣杯布局

圣杯布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>grid</title>
</head>
<body>
    <div class="container">
      <header class="header">header</header>
      <aside class="navbar">navbar</aside>
      <main class="main">main</main>
      <aside class="sidebar">sidebar</aside>
      <footer class="footer">footer</footer>
  </div>
</body>
</html>

*{margin:0; padding:0; box-sizing:border-box;}
body{text-decoration:none; color:inherit;}
a{text-decoration:none; color:inherit;}
/*layout*/
.container{
  max-width:56em; margin:0 auto; padding:1em; background-color:#fafafa;
  display:grid; grid-template-areas:"header header header" "navbar main sidebar" "footer footer footer"; grid-template-columns:1fr 3fr 1fr; grid-template-rows:1fr 3fr 1fr; grid-gap:1em;
}
.header .footer{grid-column:1 / 4;}
.container > *{display:flex; justify-content:center; align-items:center; border:1px solid #eee; padding:1em;}
/*header*/
.header{grid-area:header;}
/*navebar*/
.navebar{grid-area:navebar;}
/*main*/
.main{grid-area:main;}
/*sidebar*/
.sidebar{grid-area:sidebar;}
/*footer*/
.footer{grid-area:footer;}
/*media*/
@media all and (max-width: 700px){
  aside, main{grid-column:1 / 4;}
}

網(wǎng)格容器

默認(rèn)情況下食听，網(wǎng)格容器中的元素都是塊級(jí)元素，但也可設(shè)置為行內(nèi)元素污茵。

設(shè)置網(wǎng)格容器

display:grid
使用display:grid指定節(jié)點(diǎn)后便可以使用網(wǎng)格布局來構(gòu)建行和列樱报，用于生成一個(gè)塊級(jí)網(wǎng)格。

<style>
.grid-container{
  display:grid;
}
</style>
<div div="grid"></div>

display:inline-block用于生成一個(gè)內(nèi)聯(lián)網(wǎng)格

當(dāng)設(shè)置網(wǎng)格布局后泞当，網(wǎng)格容器內(nèi)的網(wǎng)格項(xiàng)的float迹蛤、display:inline-block、display:table-cell襟士、display:vertical-align和column-*等設(shè)置都將會(huì)失效盗飒。

float和clear使用在網(wǎng)格項(xiàng)中會(huì)失效
多列布局模塊中的column-*屬性運(yùn)用在網(wǎng)格容器上會(huì)失效
vertical-align使用在網(wǎng)格單元格上會(huì)失效
:first-line和:first-letter等為元素不能應(yīng)用在網(wǎng)格容器上

容器屬性	描述
display	將元素定義為網(wǎng)格，并為其內(nèi)容建立網(wǎng)格格式的上下文陋桂。
grid-template-columns	設(shè)置列內(nèi)容的屬性
grid-template-rows	設(shè)置行內(nèi)容的屬性
grid-gap	設(shè)置行或列的間距
grid-template-areas	設(shè)置單元格區(qū)域
grid-auto-flow	設(shè)置單元格方向
grid-auto-columns	設(shè)置超出網(wǎng)格的單元格屬性
grid-auto-rows	設(shè)置超出網(wǎng)格的單元格屬性
place-items	設(shè)置單元格中內(nèi)容排列位置
place-content	設(shè)置內(nèi)容區(qū)域在容器中的位置

網(wǎng)格項(xiàng)目

網(wǎng)格項(xiàng)目通過引用特定網(wǎng)格線（grid lines）來確定網(wǎng)格項(xiàng)（grid item）在網(wǎng)格內(nèi)的位置

.grid-item{
  grid-column-start: <line> | <name> | span <number> | span <name> | auto;
  grid-column-end: <line> | <name> | span <number> | span <name> | auto;
  grid-row-start: <line> | <name> | span <number> | span <name> | auto;
  grid-row-end: <line> | <name> | span <number> | span <name> | auto;
}

網(wǎng)格項(xiàng)屬性	描述
grid-row-start	網(wǎng)格項(xiàng)行開始網(wǎng)格線
grid-row-end	網(wǎng)格項(xiàng)行結(jié)束網(wǎng)格線
grid-column-start	網(wǎng)格項(xiàng)列開始網(wǎng)格線
grid-column-end	網(wǎng)格項(xiàng)列結(jié)束網(wǎng)格線
grid-row	grid-row-start和grid-row-end的合并簡(jiǎn)化形式
grid-column	grid-column-start和grid-column-end的合并簡(jiǎn)化形式

網(wǎng)格線取值類型

取值類型	描述
line	一個(gè)數(shù)字引用一個(gè)編號(hào)的網(wǎng)格線逆趣，或使用一個(gè)名字來引用一個(gè)命名的網(wǎng)格線。
span <number>	網(wǎng)格項(xiàng)跨越所提供的網(wǎng)格軌道的數(shù)量
span <name>	網(wǎng)格項(xiàng)跨域到與之提供的名稱位置
auto	自動(dòng)放置自動(dòng)跨越嗜历，默認(rèn)會(huì)擴(kuò)展一個(gè)網(wǎng)格軌道的寬度或高度宣渗。

當(dāng)元素設(shè)置網(wǎng)格項(xiàng)屬性后抖所，以下CSS屬性將對(duì)網(wǎng)格項(xiàng)失效。

float
display:inline-block
display:table-cell
vertical-align
column-*

例如：網(wǎng)格項(xiàng)定位

列：從第2條列線開始到名為five的列線結(jié)束
行：從名為row1-start行線開始到第3條行線結(jié)束

網(wǎng)格項(xiàng)定位

.grid-container{
  display:grid;
}
.item-a{
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end:3;
}

例如：網(wǎng)格線跨度

列：從第1條列線開始跨越到名為col4-start的列線結(jié)束
行：從第2條行線開始跨越2條行線后結(jié)束

網(wǎng)格線跨越

.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屬性痕囱，默認(rèn)情況下網(wǎng)格項(xiàng)將占據(jù)1個(gè)軌道部蛇。網(wǎng)格項(xiàng)是可以相互重疊的，可設(shè)置z-index屬性來控制層疊的上下順序咐蝇。

簡(jiǎn)化形式

grid-column和grid-row屬性是grid-column-start+grid-column-end和grid-row-start+grid-row-end屬性的簡(jiǎn)寫形式涯鲁。

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

grid-column和grid-row的取值是<start-line> / <end-line>，每個(gè)網(wǎng)格項(xiàng)接受相同的值有序，包括跨度抹腿。

例如：網(wǎng)格項(xiàng)定位簡(jiǎn)寫

列：從第3條列線開始跨越2個(gè)網(wǎng)格后結(jié)束
行：從名為third-line的行線開始到第4個(gè)行線結(jié)束

簡(jiǎn)寫形式

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

若沒有聲明分割線結(jié)束位置，則網(wǎng)格項(xiàng)默認(rèn)占據(jù)1個(gè)網(wǎng)格軌道旭寿。

行高列寬

使用grid-template-rows設(shè)置行高警绩，使用grid-template-columns設(shè)置列寬。grid-template-rows和grid-template-columns使用空格分隔的值列表盅称，用來定義網(wǎng)格的行和列肩祥。這些值表示網(wǎng)格軌道（Grid Track）的大小，他們之間的空格則表示分割線缩膝。

取值	描述
track-size	可以是長(zhǎng)度值混狠、百分比、等分塊`fr`
line-name	名稱

.grid-container{
  display:grid;
  grid-template-rows:<track-size>... | <line-name> <track-size>...;
  grid-template-columns:<track-size>... | <line-name> <track-size>...;
}

需要注意的是疾层，當(dāng)在網(wǎng)格軌道值之間保留空格時(shí)網(wǎng)格線會(huì)自動(dòng)分配正數(shù)和負(fù)數(shù)的名稱将饺，也可明確指定網(wǎng)格線名稱。

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

未指定網(wǎng)格線名稱

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

當(dāng)指定網(wǎng)格線名稱是需使用[]中括號(hào)將名稱包裹

指定網(wǎng)格線名稱

一條網(wǎng)格線可以包含多個(gè)名稱痛黎，網(wǎng)格線名稱<line-name>的多個(gè)名稱之間使用空格分隔予弧。

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

如果需要定義包含多個(gè)重復(fù)的值，可使用repeat()表示法來簡(jiǎn)化定義湖饱。

.grid-container{
  display:grid;
  grid-template-columns: repeat(2, 20px [col]);
}
/*等價(jià)寫法*/
.grid-container{
  display:grid;
  grid-template-columns: 20px [col] 20px [col];
}

例如：設(shè)置3行4列的網(wǎng)格掖蛤，每個(gè)單元格空間都是100px，即每個(gè)單元格的行高為100px井厌，列寬為100px蚓庭。

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

指定行高列寬

行高和列表的設(shè)置方式

設(shè)置方式	描述
絕對(duì)單位	`grid-template-rows: 100px 100px 100px;`
使用百分比`%`	`grid-template-columns: 25% 25% 25% 25%;`
使用`repeat()`方法	`grid-template-columns: repeat(4, 25%);`
使用`fr`關(guān)鍵字	`grid-template-columns: 50px 3fr 1fr 2fr;`
使用`minmax()`方法	`grid-template-columns:150px 1fr 1fr minmax(50px, 150px);`
使用`auto`關(guān)鍵字	`grid-template-columns:100px auto 130px 100px;`
使用網(wǎng)格線的名稱	`grid-template-columns: [c1] 100px [c2] 100px [c1] 100px [c3] auto [c4];`

repeat

使用repeat()方法

repeat(times, value)

參數(shù)	描述
times	重復(fù)次數(shù)
value	重復(fù)的值

當(dāng)單元格很多且重復(fù)時(shí)可使用repeat方法，repeat方法可接受兩個(gè)參數(shù)旗笔，第一個(gè)時(shí)重復(fù)的次數(shù)彪置，第二個(gè)時(shí)所需重復(fù)的值。repeat方法除了使用重復(fù)值蝇恶，還可以使用重復(fù)模式拳魁。

grid-template-rows: repeat(3 , 33%);
grid-template-columns: repeat(4, 25%);

重復(fù)模式

grid-template-columns: repeat(2, 100px 100px);

例如：使用Grid布局實(shí)現(xiàn)3x3的九宮格布局

<style>
.grid-container{
  display:grid; 
  grid-template-columns:repeat(3, 33.3%); 
  grid-template-rows:repeat(3, 33.3%);
}
</style>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

使用auto-fill讓容器自動(dòng)判斷是否填充，當(dāng)單元格大小固定時(shí)但網(wǎng)格容器大小不確定時(shí)撮弧，若希望每一行或每一列可以容納盡可能多的單元格時(shí)可采用auto-fill關(guān)鍵字來自動(dòng)填充潘懊。

grid-template-columns: repeat(auto-fill, 100px 20px 80px);

fr

使用fr關(guān)鍵字

fr（fraction姚糊，片段）單元允許使用等分網(wǎng)格容器剩余可用空間來設(shè)置網(wǎng)格軌道的大小。

例如：將每個(gè)網(wǎng)格項(xiàng)設(shè)置為網(wǎng)格空間寬度的1/3

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

剩余可用空間是除開所有非靈活網(wǎng)格項(xiàng)之后計(jì)算得到的授舟，若兩列段都分別為1fr和2fr則表示后者為前者2倍救恨，可結(jié)合px使用，可對(duì)剩余空間按fr分配释树。

例如：可用空間總量減去50px后的剩余可用空間肠槽，使用fr按等分比例分配。

grid-template-columns: 50px 3fr 1fr 2fr;

片段

網(wǎng)格區(qū)域

可設(shè)置網(wǎng)格容器的grid-template-areas屬性來指定網(wǎng)格區(qū)域名稱奢啥，用以定義網(wǎng)格模板秸仙。在通過設(shè)置網(wǎng)格項(xiàng)的grid-area屬性來定義網(wǎng)格區(qū)域。

.grid-container{
  grid-template-areas:
    "<grid-area-name> | . | name | ..."
    "...";
}

例如：定義3行4列網(wǎng)格桩盲，第1行由4個(gè)header區(qū)域組成寂纪，第2行由2個(gè)main區(qū)域和1個(gè)空單元格和1個(gè)sidebar區(qū)域組成，第3行由4個(gè)footer區(qū)域組成赌结。

網(wǎng)格區(qū)域

.grid-container{
  display:grid;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}
.item-header{
  grid-area:header;
}
.item-main{
  grid-area:main;
}
.item-sidebar{
  grid-area:sidebar;
}
.item-footer{
  grid-area:footer;
}

使用一個(gè)點(diǎn)號(hào).表示一個(gè)空單元格捞蛋，這種語法本身可視為網(wǎng)格的可視化結(jié)構(gòu)。
可以使用任意數(shù)量相鄰的點(diǎn).來聲明單個(gè)空單元格柬姚，只要點(diǎn)之間沒有空隙隔開就代表一個(gè)單獨(dú)的單元格拟杉。
聲明中每一行都需要具有相同數(shù)量的單元格
重復(fù)的網(wǎng)格區(qū)域名稱將會(huì)導(dǎo)致內(nèi)容跨域單元格

網(wǎng)格模板

網(wǎng)格模板grid-template用于定義grid-template-rows、grid-template-columns伤靠、grid-template-area三個(gè)的簡(jiǎn)寫屬性捣域。

.grid-container{
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

grid-template:none表示將三個(gè)屬性值設(shè)置為初始值
<grid-template-rows> / <grid-template-columns>表示將grid-template-rows和grid-template-columns設(shè)置為特定的值啼染，同時(shí)設(shè)置grid-template-area為none宴合。

.grid-container{
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

.grid-container{
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-areas:"header header header" "footer footer footer";
}

網(wǎng)格間隙

通過設(shè)置網(wǎng)格容器的grid-row-gap和grid-column-gap屬性來指定網(wǎng)格線的大小，可想象成行列之間的間距的寬度迹鹅，即行間距和列間距卦洽。

.grid-container{
  grid-row-gap: <line-size>;
  grid-column-gap: <line-size>;
}
/*簡(jiǎn)寫*/
.grid-container{
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

grid-gap是grid-row-gap和grid-column-gap的簡(jiǎn)寫形式
若grid-row-gap沒有定義則自動(dòng)設(shè)置為grid-column-gap的長(zhǎng)度

例如：設(shè)置九宮格布局

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

九宮格

例如：九宮格間隙簡(jiǎn)寫

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

網(wǎng)格項(xiàng)對(duì)齊方式

網(wǎng)格容器內(nèi)的網(wǎng)格項(xiàng)的對(duì)齊方式可分為2種

水平對(duì)齊justify-items
垂直對(duì)齊align-items

通過設(shè)置網(wǎng)格容器的place-items屬性，用于配置容器項(xiàng)的水平對(duì)齊方式justify-items和垂直對(duì)齊方式align-items斜棚。簡(jiǎn)單來說阀蒂，place-items實(shí)際上是justify-items和align-items的簡(jiǎn)寫形式。

.grid-container{
  display:grid;
  place-items:<align-items> <justify-items>;
}

place-items的第1個(gè)值用來設(shè)置align-items垂直對(duì)齊屬性弟蚀，第2個(gè)值用來設(shè)置justify-items水平對(duì)齊屬性蚤霞。若省略第2個(gè)值則第1個(gè)值將自動(dòng)分配給這兩個(gè)屬性。

水平對(duì)齊

通過設(shè)置網(wǎng)格容器的justify-items屬性义钉，即沿著inline行軸線對(duì)齊網(wǎng)格項(xiàng)昧绣，justify-items屬性的取值即網(wǎng)格項(xiàng)的對(duì)齊方式，其值適用于網(wǎng)格容器內(nèi)的所有網(wǎng)格項(xiàng)捶闸。

.grid-container{
  display:grid;
  justify-items: start | end | center |stretch;
}

水平對(duì)齊	描述
start	左對(duì)齊夜畴，將網(wǎng)格項(xiàng)沿單元格左側(cè)起始邊緣對(duì)齊拖刃。
end	右對(duì)齊，將網(wǎng)格項(xiàng)沿單元格右側(cè)結(jié)束邊緣對(duì)齊贪绘。
center	居中對(duì)齊兑牡，將網(wǎng)格項(xiàng)沿單元格的水平中間位置對(duì)齊。
stretch	默認(rèn)税灌，水平拉伸填滿單元格水平寬度均函。

左對(duì)齊

右對(duì)齊

水平居中

水平填充

四種內(nèi)容對(duì)齊方式也可應(yīng)用于網(wǎng)格項(xiàng)中的justify-self屬性中。

.grid-item{
  justify-item: start | end | center | stretch;
}

垂直對(duì)齊

通過設(shè)置網(wǎng)格容器的align-items屬性可沿block列軸線對(duì)齊網(wǎng)格項(xiàng)菱涤，與之反向的屬性是justify-items边酒，justify-items沿inline行軸線對(duì)齊。align-item適用于網(wǎng)格容器內(nèi)所有的網(wǎng)格項(xiàng)狸窘。

align-items的取值包括4種

垂直對(duì)齊	描述
start	頂對(duì)齊墩朦，將網(wǎng)格項(xiàng)對(duì)齊到單元格頂部起始邊緣位置。
end	底對(duì)齊翻擒，將網(wǎng)格項(xiàng)對(duì)齊到單元格底部結(jié)束邊緣位置氓涣。
center	垂直居中對(duì)齊，將網(wǎng)格項(xiàng)對(duì)齊到單元格垂直中間位置陋气。
stretch	默認(rèn)值劳吠，垂直拉伸填滿單元格垂直高度。

align-items的4種對(duì)齊方式同樣適用于網(wǎng)格項(xiàng)的align-self屬性巩趁。

頂對(duì)齊

底對(duì)齊

垂直居中對(duì)齊

垂直填充

網(wǎng)格內(nèi)容對(duì)齊方式

當(dāng)網(wǎng)格容器大于網(wǎng)格項(xiàng)總計(jì)大小時(shí)痒玩，若網(wǎng)格項(xiàng)均采用非靈活性的單位設(shè)置時(shí)，比如px像素议慰。此時(shí)可以設(shè)置網(wǎng)格容器內(nèi)網(wǎng)格內(nèi)容的對(duì)齊方式蠢古。網(wǎng)格內(nèi)容的對(duì)齊方式也分為2種，分別是

網(wǎng)格內(nèi)容水平對(duì)齊 justify-content
網(wǎng)格內(nèi)容垂直對(duì)齊 align-content

水平對(duì)齊

justify-content屬性會(huì)沿著inline行軸線方向?qū)ζ渚W(wǎng)格别凹，與之相反相反的屬性為align-content草讶，align-content將沿著block列軸線方向?qū)R網(wǎng)格。

水平對(duì)齊	描述
start	左對(duì)齊炉菲，將網(wǎng)格對(duì)齊到網(wǎng)格容器的左側(cè)起始邊緣堕战。
end	右對(duì)齊，將網(wǎng)格對(duì)齊到網(wǎng)格容器的右側(cè)結(jié)束邊緣拍霜。
center	水平居中嘱丢，將網(wǎng)格對(duì)齊到網(wǎng)格容器的水平中間位置。
stretch	水平拉伸祠饺，調(diào)整網(wǎng)格項(xiàng)寬度越驻，允許網(wǎng)格填充整個(gè)網(wǎng)格容器的寬度。
space-between	兩端對(duì)齊，每個(gè)網(wǎng)格項(xiàng)之間放置均勻空間伐谈，左右兩端0空間烂完。
space-around	每個(gè)網(wǎng)格項(xiàng)之間放置均勻空間，左右兩端放置一半空間诵棵。
space-evenly	每個(gè)網(wǎng)格項(xiàng)之間放置均勻空間抠蚣，左右兩端放置一個(gè)均勻空間。

.grid-container{
  display:grid;
  justify-content: start | end | center | stretch | space-between | space-around | space-evenly;
}

左對(duì)齊

右對(duì)齊

居中對(duì)齊

水平拉伸

兩端對(duì)齊

減半分布

均勻分布

垂直對(duì)齊

當(dāng)網(wǎng)格總計(jì)尺寸小于網(wǎng)格容器時(shí)履澳，此時(shí)若使用非靈活性的尺寸單位尺寸（比如：px像素）來設(shè)置大小嘶窄，就可能出現(xiàn)網(wǎng)格內(nèi)元素的排列問題。在這種情況下距贷，可以通過設(shè)置網(wǎng)格容器中內(nèi)容的對(duì)齊方式來實(shí)現(xiàn)內(nèi)容的布局柄冲。align-content屬性可沿列軸線block對(duì)齊網(wǎng)格。

垂直對(duì)齊	描述
start	頂對(duì)齊忠蝗，將網(wǎng)格對(duì)齊到網(wǎng)格容器的頂部起始邊緣现横。
end	底對(duì)齊，將網(wǎng)格對(duì)齊到網(wǎng)格容器底部結(jié)束邊緣阁最。
center	垂直居中戒祠，將網(wǎng)格對(duì)齊到網(wǎng)格容器垂直中間位置。
stretch	垂直拉伸速种，調(diào)整網(wǎng)格項(xiàng)的高度姜盈，允許網(wǎng)格垂直拉伸后填滿整個(gè)網(wǎng)格容器的高度。
space-between	垂直兩端對(duì)齊配阵，在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間馏颂，上下兩端0空間。
space-around	垂直兩端減半對(duì)齊棋傍，在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間救拉，上下兩端放置一半的空間。
space-evenly	垂直兩端均勻?qū)R舍沙，在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻空間近上，上下兩端放置一個(gè)均勻空間。

.grid-container{
  display:grid;
  align-content: start | end | center | stretch | space-between | space-around | space-evenly;
}

頂對(duì)齊

低對(duì)齊

垂直居中

垂直拉伸

兩端對(duì)齊

兩端減半

均勻分布

簡(jiǎn)寫形式

place-content是justify-content和align-content的簡(jiǎn)寫形式

.grid-container{
  display:grid;
  place-content:<align-content> <justify-content>;
}

place-content的第一個(gè)參數(shù)是align-content拂铡，第二個(gè)參數(shù)是justify-content。若place-content僅設(shè)置一個(gè)參數(shù)則自動(dòng)將值分配給這兩個(gè)屬性葱绒。

網(wǎng)格軌道（Grid Tracks）

Grid網(wǎng)格布局使我們?cè)贑SS中定義網(wǎng)格感帅，并將網(wǎng)格項(xiàng)放置到網(wǎng)格單元格中。事實(shí)上無需指定每個(gè)網(wǎng)格軌道地淀，也無需手動(dòng)放置每個(gè)網(wǎng)格項(xiàng)失球，因?yàn)榫W(wǎng)格布局足夠靈活可自適應(yīng)網(wǎng)格項(xiàng)。這些都是由顯式和隱式網(wǎng)格來處理。

顯式網(wǎng)格

使用grid-template-rows实苞、grid-template-columns豺撑、grid-template-areas屬性定義形成固定數(shù)量網(wǎng)格線和網(wǎng)格軌道的方式成為顯式網(wǎng)格。

例如：定義2x4即2個(gè)水平軌道和4個(gè)垂直軌道的顯式網(wǎng)格

顯式網(wǎng)格

.grid-container{
  display:grid;
  grid-template-rows:100px 100px;
  grid-template-columns:1fr 1fr 1fr 1fr;
  grid-gap:10px;
}

對(duì)于重復(fù)軌道黔牵，可使用repeat()表示法來自動(dòng)化實(shí)現(xiàn)聪轿，repeat()表示法的第一個(gè)參數(shù)是重復(fù)的次數(shù)，第二個(gè)參數(shù)用來指定軌道列表猾浦。

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

 grid-template-columns:repeat(4, 1fr);

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

重復(fù)軌道

repeat()函數(shù)可以再進(jìn)一步自動(dòng)化陆错，即是用auto-fill和auto-fit關(guān)鍵字替代設(shè)置固定數(shù)量的重復(fù)，以實(shí)現(xiàn)自動(dòng)重復(fù)軌道金赦。

auto-fill自動(dòng)填充軌道

auto-fill關(guān)鍵字創(chuàng)建適合網(wǎng)格容器的軌道數(shù)量音瓷，而不會(huì)導(dǎo)致網(wǎng)格溢出。

例如：重復(fù)放入寬度為100px的垂直軌道以自適應(yīng)網(wǎng)格容器

.grid-container{
  display:grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

自動(dòng)填充軌道

注意：如果使用repeat(auto-fill, 1fr)則只會(huì)創(chuàng)建一個(gè)軌道夹抗，因?yàn)閷挾?code>1fr的單個(gè)軌道已經(jīng)填滿整個(gè)網(wǎng)格容器绳慎。

auto-fit 自動(dòng)調(diào)整軌道

auto-fit關(guān)鍵字的行為和auto-fill相同，auto-fit在網(wǎng)格項(xiàng)目放置后漠烧，只會(huì)根據(jù)需要?jiǎng)?chuàng)建任意數(shù)量的軌道偷线，而且任何空的重復(fù)軌道都會(huì)折疊在一起合并起來。

在repeat()函數(shù)中使用auto-fit會(huì)根據(jù)需要出盡可能多的軌道沽甥，而且軌道盡會(huì)可能多地放入網(wǎng)格容器中声邦。

例如：

.grid-container{
  display:grid;
  grid-template-columns:repeat(auto-fit, 100px);
  grid-gap:10px;
}

自動(dòng)調(diào)整軌道

repeat()函數(shù)中使用固定數(shù)量的垂直軌道，當(dāng)網(wǎng)格項(xiàng)超過固定數(shù)量時(shí)會(huì)自動(dòng)添加更多的行摆舟。

例如：

html, body{
  height:100%;
}
.grid-container{
  display:grid;
  height:100%;
  grid-template-rows: repeat(auto-fill, 100px);
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap:10px;
}

網(wǎng)格軌道

隱式網(wǎng)格

當(dāng)網(wǎng)格項(xiàng)的數(shù)量多于網(wǎng)格單元格時(shí)亥曹，或者網(wǎng)格項(xiàng)位于顯式網(wǎng)格外部時(shí)，網(wǎng)格容器會(huì)通過網(wǎng)格添加網(wǎng)格線自動(dòng)生成網(wǎng)格軌道恨诱。顯式網(wǎng)格與額外的隱式網(wǎng)格軌道和網(wǎng)格線形成了所謂的隱式網(wǎng)格媳瞪。

例如：當(dāng)2個(gè)網(wǎng)格放置在顯式網(wǎng)格之外時(shí)會(huì)導(dǎo)致創(chuàng)建隱式網(wǎng)格線和軌道

.grid-container{
  display:grid;
}
.grid-item:first-child{
  grid-column-start:-1;
}
.grid-item:nth-child(4){
  grid-row-start:4;
}

隱式網(wǎng)格

隱式軌道的寬度和高度是自動(dòng)設(shè)置，其大小足以適應(yīng)放置的網(wǎng)格項(xiàng)照宝，可更改其默認(rèn)行為蛇受。

調(diào)整隱式軌道

Grid網(wǎng)格布局中可使用grid-auto-rows和grid-auto-columns屬性指定自動(dòng)生成的網(wǎng)格軌道的大小，即隱式網(wǎng)格軌道厕鹃。當(dāng)網(wǎng)格容器中的網(wǎng)格項(xiàng)多于單元格時(shí)或網(wǎng)格項(xiàng)位于顯式網(wǎng)格之外時(shí)兢仰，會(huì)自動(dòng)創(chuàng)建隱式網(wǎng)格軌道。

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

track-size可以是長(zhǎng)度值剂碴、百分比把将、等分網(wǎng)格容器中可用空間的分?jǐn)?shù)即fr。

通過使用grid-auto-rows和grid-auto-columns屬性可以控制隱式網(wǎng)格軌道的大小忆矛。

例如：生成2x2的網(wǎng)格察蹲，單元格寬高為60x90。

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

2x2

使用grid-column和grid-row定位網(wǎng)格項(xiàng)

定位

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

item-a從第1條列線到第2條列線結(jié)束即第1列，從第2條行線開始到第3條行線結(jié)束即第2行洽议，中間交叉的位置即[2, 1]第2行第1列宗收。
item-b從第5列線開始到第6列線結(jié)束，從第2行線開始到第3行線結(jié)束亚兄。但從未定義第5列線混稽、第6列線，引用的網(wǎng)格線不存在儿捧，此時(shí)會(huì)自動(dòng)創(chuàng)建寬度為0的隱式網(wǎng)格軌道以填補(bǔ)空缺荚坞，此時(shí)可使用grid-auto-rows和grid-auto-columns指定隱式軌道的大小。

.grid-container{
  display:grid;
  grid-auto-columns:60px;
}

設(shè)置隱式列

例如：固定寬度和高度的隱式軌道

.grid-container{
  display:grid;
  grid-template-rows:100px 100px;
  grid-template-columns:repeat(4, 1fr);
  grid-gap:10px;
  grid-auto-rows:60px;
  grid-auto-columns:200px;
}

調(diào)整隱式軌道

通過minmax()函數(shù)來指定范圍菲盾，可使隱式軌道更為靈活颓影。

例如：設(shè)置隱式軌道至少有200px的寬度和60px的高度，若內(nèi)容需要將自動(dòng)擴(kuò)展懒鉴。

.grid-container{
  grid-auto-rows:minmax(60px, auto);
  grid-auto-columns:minmax(200px, auto);
}

學(xué)習(xí)資料

https://www.html.cn/archives/8510
https://www.html.cn/archives/10327
https://zhuanlan.zhihu.com/p/40148221

最后編輯于：2020.05.19 00:04:44

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末诡挂，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子临谱，更是在濱河造成了極大的恐慌璃俗，老刑警劉巖，帶你破解...
沈念sama閱讀 216,919評(píng)論 6贊 502
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件悉默，死亡現(xiàn)場(chǎng)離奇詭異城豁，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)抄课，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,567評(píng)論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門唱星，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人跟磨，你說我怎么就攤上這事间聊。” “怎么了抵拘？”我有些...
開封第一講書人閱讀 163,316評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵哎榴，是天一觀的道長(zhǎng)。經(jīng)常有香客問我僵蛛，道長(zhǎng)尚蝌，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,294評(píng)論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任墩瞳，我火速辦了婚禮驼壶，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘喉酌。我一直安慰自己，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,318評(píng)論 6贊 390
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布泪电。她就那樣靜靜地躺著般妙，像睡著了一般。火紅的嫁衣襯著肌膚如雪相速。梳的紋絲不亂的頭發(fā)上碟渺，一...
開封第一講書人閱讀 51,245評(píng)論 1贊 299
城市分裂傳說
那天，我揣著相機(jī)與錄音突诬，去河邊找鬼苫拍。笑死，一個(gè)胖子當(dāng)著我的面吹牛旺隙，可吹牛的內(nèi)容都是我干的绒极。我是一名探鬼主播，決...
沈念sama閱讀 40,120評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼蔬捷，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼垄提！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起周拐，我...
開封第一講書人閱讀 38,964評(píng)論 0贊 275
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤铡俐，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后妥粟，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體审丘，經(jīng)...
沈念sama閱讀 45,376評(píng)論 1贊 313
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,592評(píng)論 2贊 333
?白月光啟示錄
正文我和宋清朗相戀三年勾给，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了滩报。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,764評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡锦秒，死狀恐怖露泊，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情旅择，我是刑警寧澤惭笑，帶...
沈念sama閱讀 35,460評(píng)論 5贊 344
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏产雹。R本人自食惡果不足惜搓侄，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,070評(píng)論 3贊 327
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望择卦。院中可真熱鬧，春花似錦、人聲如沸畜眨。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,697評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)贰健。三九已至恬汁，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間氓侧，已是汗流浹背脊另。一陣腳步聲響...
開封第一講書人閱讀 32,846評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國(guó)打工偎痛，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人载庭。一個(gè)月前我還...
沈念sama閱讀 47,819評(píng)論 2贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像靖榕，于是被迫代替她去往敵國(guó)和親顽铸。傳聞我的和親對(duì)象是個(gè)殘疾皇子谓松，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,665評(píng)論 2贊 354