通過(guò)將屬性 display 的值設(shè)為 grid埠通，HTML 元素就可以變?yōu)榫W(wǎng)格容器。 通過(guò)前面的操作，你可以對(duì)該容器使用與 CSS 網(wǎng)格（CSS Grid）相關(guān)的屬性咙咽。
注意： 在 CSS 網(wǎng)格中亿傅，父元素稱為容器（container）媒峡，它的子元素稱為項(xiàng)（items）。
grid-template-columns
簡(jiǎn)單地添加一個(gè)網(wǎng)格元素并不會(huì)有任何明顯的效果葵擎。 你還需要明確網(wǎng)格的結(jié)構(gòu)谅阿。 在一個(gè)網(wǎng)格容器中使用 grid-template-columns 屬性可以添加一些列，示例如下：
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
/* 這里設(shè)置了3列分別寬度為20 40 40*/
grid-template-columns: 20% 40% 40%;
/* 也可以用其它的單位 */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
grid-template-rows
同樣酬滤，這是一個(gè)設(shè)定多少行的屬性签餐，
grid-template-rows: 30% 30%;
行和列的大小
使用 CSS 網(wǎng)格單位來(lái)更改列和行的大小
在 CSS 網(wǎng)格中，可以使用絕對(duì)單位（如 px）或相對(duì)單位（如 em）來(lái)定義行或列的大小盯串。 下面的單位也可以使用：
fr：設(shè)置列或行占剩余空間的比例氯檐，
auto：設(shè)置列寬或行高自動(dòng)等于它的內(nèi)容的寬度或高度，
%：將列或行調(diào)整為它的容器寬度或高度的百分比体捏，
grid-column-gap
grid-template-columns: 20% 40% 1fr;
grid-column-gap: 10px;
就是表示每列之間的距離
grid-row-gap
這個(gè)就是沒(méi)行之間的距離冠摄，效果在上面
grid-gap
是前面2個(gè)屬性的簡(jiǎn)寫形式
grid-gap: 10px 20px;
第一個(gè)是行間距，第2個(gè)是列
grid-column
前面講的都是容器的屬性几缭，現(xiàn)在講的是容器內(nèi)的元素
網(wǎng)格中河泳，假想的水平線和垂直線被稱為線（lines）。 這些線在網(wǎng)格的左上角從 1 開(kāi)始編號(hào)年栓，垂直線向右拆挥、水平線向下累加計(jì)數(shù)。
這是一個(gè) 3x3 網(wǎng)格的線條：
要設(shè)置一個(gè)網(wǎng)格項(xiàng)占據(jù)幾列某抓，你可以使用 grid-column 屬性加上網(wǎng)格線條的編號(hào)來(lái)定義網(wǎng)格項(xiàng)開(kāi)始和結(jié)束的位置纸兔。
示例如下：
.d1 {
background: LightSkyBlue;
grid-column: 1/3;
}
那么現(xiàn)在1元素應(yīng)該占領(lǐng)前面2個(gè)列惰瓜，如圖
grid-row
和上面一樣，控制子元素占幾行
.d1 {
background: LightSkyBlue;
grid-column: 1/3;
grid-row: 1/3;
}
justify-self
使用 justify-self 水平對(duì)齊項(xiàng)目
在 CSS 網(wǎng)格中食拜，每個(gè)網(wǎng)格項(xiàng)的內(nèi)容分別位于被稱為單元格（cell）的框內(nèi)鸵熟。 你可以使用網(wǎng)格項(xiàng)的 justify-self 屬性，設(shè)置其內(nèi)容的位置在單元格內(nèi)沿水平軸的對(duì)齊方式负甸。 默認(rèn)情況下流强，這個(gè)屬性的值是 stretch，這將使內(nèi)容占滿整個(gè)單元格的寬度呻待。 該 CSS 網(wǎng)格屬性也可以使用其他的值：
start：使內(nèi)容在單元格左側(cè)對(duì)齊打月，
center：使內(nèi)容在單元格居中對(duì)齊，
end：使內(nèi)容在單元格右側(cè)對(duì)齊蚕捉，
.d1 {
background: LightSkyBlue;
grid-column: 1/3;
justify-self: center;
}
align-self
使用 align-self 垂直對(duì)齊項(xiàng)目
正如能設(shè)置網(wǎng)格項(xiàng)沿水平方向的對(duì)齊方式一樣奏篙，我們也可以設(shè)置網(wǎng)格項(xiàng)沿豎直方向的對(duì)齊方式。 為此迫淹，我們可以對(duì)網(wǎng)格項(xiàng)使用 align-self 屬性來(lái)實(shí)現(xiàn)秘通。 在上一個(gè)挑戰(zhàn)中適用于 justify-self 屬性的屬性值同樣也可用于這個(gè)屬性。
.d1 {
background: LightSkyBlue;
grid-column: 1/3;
justify-self: center;
align-self: center;
}
justify-items
使用 justify-items 水平對(duì)齊所有項(xiàng)目
在grid容器中設(shè)置敛熬。讓所有子元素統(tǒng)一對(duì)齊方式
.container {
font-size: 40px;
width: 100%;
height: 500px;
background: LightGray;
display: grid;
grid-template-columns: 20% 40% 1fr;
grid-template-rows: 30% 30%;
grid-gap: 10px 20px;
justify-items:center;
}
align-items
使用 align-items 垂直對(duì)齊所有項(xiàng)目
對(duì)網(wǎng)格容器使用 align-items 屬性可以讓網(wǎng)格中所有的網(wǎng)格項(xiàng)沿豎直方向?qū)R肺稀。
grid-template-areas
就是為每個(gè)單元個(gè)取名，然后把子元素放入格子中应民，只能是矩形形式
container中設(shè)置
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
}
grid-area
在為網(wǎng)格添加區(qū)域模板后话原，可以通過(guò)引用你所定義的區(qū)域的名稱，將元素放入相應(yīng)的區(qū)域诲锹。 為此繁仁，你需要對(duì)網(wǎng)格項(xiàng)使用 grid-area：
.d2 {
grid-area: content;
background: LightSalmon;
}
用法2
如果網(wǎng)格中沒(méi)有定義區(qū)域模板，你也可以像這樣為它添加一個(gè)模板：
item1 { grid-area: 1/1/2/4; }
這里使用了你之前學(xué)習(xí)的網(wǎng)格線編號(hào)來(lái)定義網(wǎng)格項(xiàng)的區(qū)域归园。 上例中數(shù)字代表這些值：
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
因此黄虱，示例中的網(wǎng)格項(xiàng)將占用第 1 條水平網(wǎng)格線（起始）和第 2 條水平網(wǎng)格線（終止）之間的行，及第 1 條垂直網(wǎng)格線（起始）和第 4 條垂直網(wǎng)格線（終止）之間的列蔓倍。
如：
.item5 {
background: PaleGreen;
grid-area:3/1/4/4;
}
repeat用法
使用 repeat 函數(shù)減少重復(fù)
使用 grid-template-columns 或 grid-template-rows 定義網(wǎng)格結(jié)構(gòu)時(shí)悬钳，你需要為添加的每一行或每一列都輸入一個(gè)值。
如果一個(gè)網(wǎng)格共有 100 行且每行高度相同偶翅， 那我們就需要輸入 100 個(gè)值，這顯然不太實(shí)際碉渡。 為此聚谁，更好的方式是使用 repeat 方法指定行或列的重復(fù)次數(shù)，后面加上逗號(hào)以及需要重復(fù)的值滞诺。
以下為添加 100 行網(wǎng)格的例子形导，每行高度均為 50px：
grid-template-rows: repeat(100, 50px);
你還可以用 repeat 方法重復(fù)多個(gè)值环疼，并在定義網(wǎng)格結(jié)構(gòu)時(shí)與其他值一起使用。 比如：
grid-template-columns: repeat(2, 1fr 50px) 20px;
效果相當(dāng)于：
grid-template-columns: 1fr 50px 1fr 50px 20px;
注意： 1fr 50px 重復(fù)了兩次朵耕，后面跟著 20px炫隶。
minmax函數(shù)
使用 minmax 函數(shù)限制項(xiàng)目大小
此外，內(nèi)置函數(shù) minmax 也可用于設(shè)置 grid-template-columns 和 grid-template-rows 的值阎曹。 它的作用是在網(wǎng)格容器改變大小時(shí)限制網(wǎng)格項(xiàng)的大小伪阶。 為此，你需要指定網(wǎng)格項(xiàng)允許的尺寸范圍处嫌。 例如：
grid-template-columns: 100px minmax(50px, 200px);
在上面的代碼中栅贴，我們通過(guò) grid-template-columns 添加了兩列，第一列寬度為 100px熏迹，第二列寬度最小值是 50px檐薯，最大值是 200px。
auto-fill
使用 auto-fill 創(chuàng)建彈性布局
repeat 方法帶有一個(gè)名為自動(dòng)填充（auto-fill）的功能注暗。 它的功能是根據(jù)容器的大小坛缕，盡可能多地放入指定大小的行或列。 你可以通過(guò)結(jié)合 auto-fill 和 minmax 來(lái)更靈活地布局捆昏。
repeat(auto-fill, minmax(60px, 1fr));
上面的代碼效果是這樣：首先赚楚，列的寬度會(huì)隨容器大小改變。其次屡立，只要容器寬度不足以插入一個(gè)寬為 60px 的列直晨，當(dāng)前行的所有列就都會(huì)一直拉伸。請(qǐng)自己調(diào)整寬度膨俐，動(dòng)手試一下就不難理解了勇皇。 注意： 如果容器寬度不足以將所有網(wǎng)格項(xiàng)放在同一行，余下的網(wǎng)格項(xiàng)將會(huì)移至新的一行焚刺。
auto-fit
使用 auto-fit 創(chuàng)建彈性布局
auto-fit 效果幾乎和 auto-fill 一樣敛摘。 不同點(diǎn)僅在于，當(dāng)容器的大小大于各網(wǎng)格項(xiàng)之和時(shí)乳愉，auto-fill 會(huì)持續(xù)地在一端放入空行或空列兄淫，這樣就會(huì)使所有網(wǎng)格項(xiàng)擠到另一邊；而 auto-fit 則不會(huì)在一端放入空行或空列蔓姚，而是會(huì)將所有網(wǎng)格項(xiàng)拉伸至合適的大小捕虽。
注意： 如果容器寬度不足以將所有網(wǎng)格項(xiàng)放在同一行，余下的網(wǎng)格項(xiàng)將會(huì)移至新的一行坡脐。
