這篇文章主要介紹了網(wǎng)格布局中如何創(chuàng)建多個網(wǎng)格的單元格，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

網(wǎng)站的建設(shè)創(chuàng)新互聯(lián)公司專注網(wǎng)站定制,經(jīng)驗豐富,不做模板,主營網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁面制作!給你煥然一新的設(shè)計體驗!已為成都宣傳片制作等企業(yè)提供專業(yè)服務(wù)。

如果用網(wǎng)格布局創(chuàng)建跨多個網(wǎng)格的單元格的話，可以在grid-column, grid-row指定單元格的開始和結(jié)束的邊界范圍。

我們首先來看一下grid-column和grid-row的格式

grid-column :(水平方向起始位置的邊界線）/（水平方向單元格結(jié)束位置的邊界線）

grid-row :(垂直單元格起始位置的邊界線）/（單元格在垂直方向上的結(jié)束位置的邊界線）

邊界線分配如下。水平方向是網(wǎng)格的最左側(cè)，網(wǎng)格外框左側(cè)的邊界線為1號，數(shù)字向右逐個增加。垂直方向是網(wǎng)格的頂部，網(wǎng)格外框上方的邊界線為1號，數(shù)字朝向底部逐一增加。

一個例子

使用網(wǎng)格布局，創(chuàng)建如下所示的布局。

說明：

上面的橙色單元格是grid-column:1/6; grid-row:1/2;

左邊的藍色單元格grid-column:1/3; grid-row:2/4;

正確的綠色單元格是grid-column:3/6; grid-row:2/3;

左下方的灰色單元格是grid-column:1/3; grid-row:4/5;

右下方的黃色單元格是grid-column:3/6; grid-row:3/5;

下面的白色單元格是

grid-column:1/2; grid-row:5/6;

grid-column:2/3; grid-row:5/6;

grid-column:3/4; grid-row:5/6;

grid-column:4/5; grid-row:5/6;

grid-column:5/6; grid-row:5/6;

下面將上述布局寫入網(wǎng)格單元格的類中。

代碼如下

編寫以下HTML，CSS。

SimpleGrid.html

    
    
    


  

    
內(nèi)容1
    
內(nèi)容2
    
內(nèi)容3
    
內(nèi)容4
    
內(nèi)容5
    
內(nèi)容6
    
內(nèi)容7
    
內(nèi)容8
    
內(nèi)容9
    
內(nèi)容10
  
  
  

SimpleGrid.css

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 160px 160px;    
    grid-template-rows: 120px 120px 120px 120px 120px;    
    border: solid #ff6a00 1px;
}
.GridItem1 {
    grid-column: 1 / 6;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
    }
.GridItem2 {
    grid-column: 1 / 3;    
    grid-row: 2 / 4;    
    background-color: #ffcb70;
    }
.GridItem3 {
    grid-column: 1 / 3;    
    grid-row: 4 / 5;    
    background-color: #7ee68d;
    }
.GridItem4 {
    grid-column: 3 / 6;    
    grid-row: 2 / 3;    
    background-color: #7ee6e2;
    }
.GridItem5 {
    grid-column: 3 / 6;    
    grid-row: 3 / 5;    
    background-color: #95a7f5;
    }
.GridItem6 {
    grid-column: 1 / 2;    
    grid-row: 5 / 6;    
    background-color: #d095f5;
    }
.GridItem7 {
    grid-column: 2 / 3;    
    grid-row: 5 / 6;    
    background-color: #e1bbfa;
    }
.GridItem8 {
    grid-column: 3 / 4;    
    grid-row: 5 / 6;    
    background-color: #d2b1e4;
    }
.GridItem9 {
    grid-column: 4 / 5;    
    grid-row: 5 / 6;    
    background-color: #dcd2e1;
    }
.GridItem10 {
    grid-column: 5 / 6;    
    grid-row: 5 / 6;    
    background-color: #eee8f1;
    }

運行結(jié)果

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。我們的布局包含跨越多個網(wǎng)格的單元格。

感謝你能夠認真閱讀完這篇文章，希望小編分享網(wǎng)格布局中如何創(chuàng)建多個網(wǎng)格的單元格內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細的解決方法等著你來學習!