通過將屬性 display 的值設(shè)為 grid，HTML 元素就可以變?yōu)榫W(wǎng)格容器。
站在用戶的角度思考問題，與客戶深入溝通，找到神木網(wǎng)站設(shè)計(jì)與神木網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋神木地區(qū)。
注意： 在 CSS 網(wǎng)格中，父元素稱為容器（container），它的子元素稱為項(xiàng)（items）。
重慶分公司
重慶分公司
#container {
display: grid;
}
在一個網(wǎng)格容器中使用 grid-template-columns 屬性可以添加一些列，示例如下：
.container {
display: grid;
grid-template-columns: 50px 50px;
}
上面的代碼會在網(wǎng)格容器中添加兩列，寬度均為 50px。 grid-template-columns 屬性值的個數(shù)表示網(wǎng)格的列數(shù)，每個值表示相應(yīng)的列寬度。
創(chuàng)建的網(wǎng)格會自動設(shè)置行數(shù)。 要手動調(diào)整行，使用 grid-template-rows 屬性。
.container {
display: grid;
grid-template-columns: 50px 50px;
grid-template-rows: 50px 50px;
}
在 CSS 網(wǎng)格中，可以使用絕對單位（如 px）或相對單位（如 em）來定義行或列的大小。 下面的單位也可以使用：
fr：設(shè)置列或行占剩余空間的比例，
auto：設(shè)置列寬或行高自動等于它的內(nèi)容的寬度或高度，
%：將列或行調(diào)整為它的容器寬度或高度的百分比，
grid-template-columns: 1fr 100px 2fr;
如果需要在列與列之間添加一些間距，我們可以使用 grid-column-gap.
grid-column-gap: 20px;
還可以用 grid-row-gap設(shè)置行間距。
grid-row-gap: 5px;
grid-gap 屬性是前兩個挑戰(zhàn)中出現(xiàn)的 grid-row-gap 和 grid-column-gap 的簡寫屬性，它更方便使用。 如果 grid-gap 只有一個值，那么這個值表示行與行之間、列與列之間的間距均為這個值。
如果有兩個值，那么第一個值表示行間距，第二個值表示列間距
grid-gap: 10px 20px;
到目前為止，所有的討論都是圍繞網(wǎng)格容器的。 grid-column 屬性是用于網(wǎng)格項(xiàng)本身的屬性。
網(wǎng)格中，假想的水平線和垂直線被稱為線（lines）。 這些線在網(wǎng)格的左上角從 1 開始編號，垂直線向右、水平線向下累加計(jì)數(shù)。
要設(shè)置一個網(wǎng)格項(xiàng)占據(jù)幾列，使用 grid-column 屬性加上網(wǎng)格線條的編號來定義網(wǎng)格項(xiàng)開始和結(jié)束的位置。
grid-column: 2 / 4;
也可以設(shè)置它占用多行。 使用 grid-row 屬性來定義一個網(wǎng)格項(xiàng)開始和結(jié)束的水平線。
grid-row: 2 / 4;
在 CSS 網(wǎng)格中，每個網(wǎng)格項(xiàng)的內(nèi)容分別位于被稱為單元格（cell）的框內(nèi)。 使用網(wǎng)格項(xiàng)的 justify-self 屬性，設(shè)置其內(nèi)容的位置在單元格內(nèi)沿水平軸的對齊方式。 默認(rèn)情況下，這個屬性的值是 stretch，這將使內(nèi)容占滿整個單元格的寬度。 該 CSS 網(wǎng)格屬性也可以使用其他的值：
start：使內(nèi)容在單元格左側(cè)對齊，
center：使內(nèi)容在單元格居中對齊，
end：使內(nèi)容在單元格右側(cè)對齊
justify-self: center;
正如能設(shè)置網(wǎng)格項(xiàng)沿水平方向的對齊方式一樣，我們也可以設(shè)置網(wǎng)格項(xiàng)沿豎直方向的對齊方式。 為此，可以對網(wǎng)格項(xiàng)使用 align-self 屬性來實(shí)現(xiàn)。
align-self: end;
CSS 網(wǎng)格中的網(wǎng)格項(xiàng)共享對齊方式。 可以分別設(shè)置它們的對齊方式，也可以對網(wǎng)格容器使用 justify-items 使它們一次性沿水平軸對齊。 這個屬性能接受之前兩個中學(xué)到的所有值作為屬性值，但與之前不同的是，它會將網(wǎng)格中 所有 的網(wǎng)格項(xiàng)按所設(shè)置的方式對齊。
justify-items: center;
對網(wǎng)格容器使用 align-items 屬性可以讓網(wǎng)格中所有的網(wǎng)格項(xiàng)沿豎直方向?qū)R。
align-items: end;
可以將網(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ū)域模板后，可以通過引用所定義的區(qū)域的名稱，將元素放入相應(yīng)的區(qū)域。 為此，需要對網(wǎng)格項(xiàng)使用 grid-area：
.item1 {
grid-area: header;
}
grid-area 屬性還有另一種使用方式。 如果網(wǎng)格中沒有定義區(qū)域模板，也可以像這樣為它添加一個模板：
item1 { grid-area: 1/1/2/4; }
上例中數(shù)字代表這些值：
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
使用 repeat 方法指定行或列的重復(fù)次數(shù)，后面加上逗號以及需要重復(fù)的值。
grid-template-columns: repeat(2,1fr,50px) 20px;
內(nèi)置函數(shù) minmax 也可用于設(shè)置 grid-template-columns 和 grid-template-rows 的值。 它的作用是在網(wǎng)格容器改變大小時限制網(wǎng)格項(xiàng)的大小。 為此，需要指定網(wǎng)格項(xiàng)允許的尺寸范圍。
grid-template-columns: 100px minmax(50px, 200px);
repeat 方法帶有一個名為自動填充（auto-fill）的功能。 它的功能是根據(jù)容器的大小，盡可能多地放入指定大小的行或列。 可以通過結(jié)合 auto-fill 和 minmax 來更靈活地布局。
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
auto-fit 效果幾乎和 auto-fill一樣。 不同點(diǎn)僅在于，當(dāng)容器的大小大于各網(wǎng)格項(xiàng)之和時，auto-fill 會持續(xù)地在一端放入空行或空列，這樣就會使所有網(wǎng)格項(xiàng)擠到另一邊；而 auto-fit 則不會在一端放入空行或空列，而是會將所有網(wǎng)格項(xiàng)拉伸至合適的大小。
注意： 如果容器寬度不足以將所有網(wǎng)格項(xiàng)放在同一行，余下的網(wǎng)格項(xiàng)將會移至新的一行。
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
將元素轉(zhuǎn)換為網(wǎng)格只會影響其子元素（即直接后代元素，英文為 direct descendants。意思是一個元素的所有后代元素中，父級元素為該元素的所有元素）。 因此，如果把某個子元素設(shè)置為網(wǎng)格，就會得到一個嵌套的網(wǎng)格。
display: grid;
grid-template-columns: auto 1fr;
