css网格
通過將屬性?display?的值設(shè)為?grid，HTML 元素就可以變?yōu)榫W(wǎng)格容器
在 CSS 網(wǎng)格中，父元素稱為容器（container），它的子元素稱為項（items）。
grid-template-columns(rows)?
屬性值的個數(shù)表示網(wǎng)格的列數(shù)，每個值表示相應(yīng)的列寬度。
repeat?
grid-template-rows: repeat(100, 50px); grid-template-columns: repeat(2, 1fr 50px) 20px;單位定義行或列的大小
絕對單位：px
相對單位：em?
fr：設(shè)置列或行占剩余空間的比例，
auto：設(shè)置列寬或行高自動等于它的內(nèi)容的寬度或高度，
%：將列或行調(diào)整為它的容器寬度或高度的百分比，
grid-column(row)-gap
列(行)間距
?如果?grid-gap?只有一個值，那么這個值表示行與行之間、列與列之間的間距均為這個值。 如果有兩個值，那么第一個值表示行間距，第二個值表示列間距。
控制空間
網(wǎng)格中，假想的水平線和垂直線被稱為線（lines）。 這些線在網(wǎng)格的左上角從 1 開始編號，垂直線向右、水平線向下累加計數(shù)。
要設(shè)置一個網(wǎng)格項占據(jù)幾列，你可以使用?grid-column?屬性加上網(wǎng)格線條的編號來定義網(wǎng)格項開始和結(jié)束的位置。
grid-column: 1 / 3;這會讓網(wǎng)格項從左側(cè)第一條線開始到第三條線結(jié)束，占用兩列。justify-self:
水平方向?qū)R
stretch:默認(rèn)，這將使內(nèi)容占滿整個單元格的寬度?
start：使內(nèi)容在單元格左側(cè)對齊，
center：使內(nèi)容在單元格居中對齊，
end：使內(nèi)容在單元格右側(cè)對齊，
align-self
豎直方向?qū)R，參數(shù)同上
justify(align)-items:
一次性沿水平(豎直)對齊所有
grid-template-area
你可以將網(wǎng)格中的一些單元格組合成一個區(qū)域（area），并為該區(qū)域指定一個自定義名稱。 可以通過給容器加上?grid-template-areas?來實(shí)現(xiàn)：
grid-template-areas:"header header header""advert content content""advert footer footer";上面的代碼將網(wǎng)格單元格分成四個區(qū)域：header、advert、content?和?footer。 每個單詞代表一個單元格，每對引號代表一行。
?grid-area
可以通過引用你所定義的區(qū)域的名稱，將元素放入相應(yīng)的區(qū)域
區(qū)域模板
item1 { grid-area: 1/1/2/4; }示例中的網(wǎng)格項將占用第 1 條水平網(wǎng)格線（起始）和第 2 條水平網(wǎng)格線（終止）之間的行，及第 1 條垂直網(wǎng)格線（起始）和第 4 條垂直網(wǎng)格線（終止）之間的列。
minmax
內(nèi)置函數(shù)?minmax?也可用于設(shè)置?grid-template-columns?和?grid-template-rows?的值。 它的作用是在網(wǎng)格容器改變大小時限制網(wǎng)格項的大小。
auto-fill
?它的功能是根據(jù)容器的大小，盡可能多地放入指定大小的行或列。
repeat(auto-fill, minmax(60px, 1fr));上面的代碼效果是這樣：首先，列的寬度會隨容器大小改變。其次，只要容器寬度不足以插入一個寬為 60px 的列，當(dāng)前行的所有列就都會一直拉伸。請自己調(diào)整寬度，動手試一下就不難理解了。?注意：?如果容器寬度不足以將所有網(wǎng)格項放在同一行，余下的網(wǎng)格項將會移至新的一行。
?auto-fit
auto-fit?效果幾乎和?auto-fill?一樣。 不同點(diǎn)僅在于，當(dāng)容器的大小大于各網(wǎng)格項之和時，auto-fill?會持續(xù)地在一端放入空行或空列，這樣就會使所有網(wǎng)格項擠到另一邊；而?auto-fit?則不會在一端放入空行或空列，而是會將所有網(wǎng)格項拉伸至合適的大小。
注意：?如果容器寬度不足以將所有網(wǎng)格項放在同一行，余下的網(wǎng)格項將會移至新的一行。
將元素轉(zhuǎn)換為網(wǎng)格只會影響其子元素（即直接后代元素，英文為 direct descendants。
總結(jié)
