最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

Grid 與 Flex 布局有一定的相似性，但是功能更加強(qiáng)大，學(xué)習(xí)起來(lái)也有不少難度，不過(guò)相信下面的內(nèi)容會(huì)幫你更快的掌握 Grid。

1. 官方定義

通過(guò)設(shè)置 display: grid; 可以定義一個(gè) CSS 網(wǎng)格。然后使用 grid-template-rows 和 grid-template-columns 屬性來(lái)定義網(wǎng)格的 columns 和 rows。
使用這些屬性定義的網(wǎng)格被描述為 顯式網(wǎng)格 (explicit grid)。
參考文獻(xiàn)：MDN

2. 慕課解釋

Grid 是一個(gè)二維網(wǎng)格布局，它有行 grid-template-rows （橫排）、 列 grid-template-columns（豎排）,內(nèi)部的項(xiàng)目就分布在其中，而網(wǎng)格線就是行和列劃分出來(lái)的。

基本屬于解釋:

容器：上面代碼中，最外層的<div>元素demo就是容器。
項(xiàng)目：內(nèi)層的三個(gè)<div>元素item就是項(xiàng)目。
行：把 row 即橫向稱為行,
列：把column即縱向稱為列。
單元格：它們的交叉區(qū)域cell 也就是單元格。
網(wǎng)格線:grid line網(wǎng)格線就是由行和列劃分出來(lái)的。

3. 語(yǔ)法

1. 塊級(jí)的網(wǎng)格。

.demo{
    display:grid
}

2. 內(nèi)聯(lián)級(jí)的網(wǎng)格。

.demo{
    display:inline-grid;
}

容器包含屬性如下

grid-template 是 grid-template-columns 、grid-template-rows、 grid-template-areas 縮寫(xiě)。

grid 是 grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow的合并縮寫(xiě)。

提示：gird 屬性很復(fù)雜因此不推薦 grid 的縮寫(xiě)

項(xiàng)目包含屬性介紹

4. 兼容性

5. 實(shí)例

本小節(jié)暫時(shí)不對(duì)父容器和子容器內(nèi)的屬性進(jìn)行詳細(xì)的實(shí)例使用展示，僅對(duì) display 屬性進(jìn)行效果區(qū)分，可以從下一小節(jié)開(kāi)始其他內(nèi)容的學(xué)習(xí)。

1. 創(chuàng)建一個(gè)塊級(jí)的 Gird 布局。

<div class="demo">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

通過(guò)下面的設(shè)置：

.demo{
    display: grid;
    grid-template-columns:100px 100px;
    grid-template-rows:100px 100px;
    border:1px solid #eee
}
.item:nth-of-type(1){
    background: red;
}
.item:nth-of-type(2){
    background: green;
}
.item:nth-of-type(3){
    background: purple;
}

效果圖

2. 創(chuàng)建內(nèi)聯(lián)級(jí)的 Gird 布局。

<div class="demo">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>    
慕課網(wǎng)學(xué)習(xí)

.demo{
    display: inline-grid;
    grid-template-columns:100px 100px;
    grid-template-rows:100px 100px;
    border:1px solid #eee
}
.item:nth-of-type(1){
    background: red;
}
.item:nth-of-type(2){
    background: green;
}
.item:nth-of-type(3){
    background: purple;
}

效果圖

6. 小結(jié)

1. Grid 布局是二維布局原因就是項(xiàng)目所在的單元格是由行和列產(chǎn)生的。
2. 網(wǎng)格線的開(kāi)始位置在容器的最頂端和最左邊。
3. 使用區(qū)域命名之后會(huì)影響網(wǎng)格線的名稱會(huì)變成 區(qū)域名-star、區(qū)域名-end
4. 可以把 columns 理解為高度，rows理解為寬度這樣便于理解。