今天就跟大家聊聊有關(guān)如何使用CSS網(wǎng)格布局grid，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司是一家專業(yè)提供龍灣企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、H5場景定制、小程序制作等業(yè)務。10年已為龍灣眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

我們先來看一下容器框架

#(id名){
    display: grid;    
    grid-template-columns: (第一列寬度) (第二列寬度) ...... (第n列寬度);    
    grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

或者

.(class名){
    display: grid;    
    grid-template-columns: (第一列寬度) (第二列寬度) ...... (第n列寬度);  
    grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

還有一種設(shè)置內(nèi)聯(lián)網(wǎng)格的方法。

#(id名){
    display: inline-grid;    
    grid-template-columns: (第一列寬度) (第二列寬度) ...... (第n列寬度);  
      grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

或者

.(class名){
    display: inline-grid;     
    grid-template-columns: (第一列寬度) (第二列寬度) ...... (第n列寬度);  
    grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

網(wǎng)格框架（項目框架）

為成為網(wǎng)格框架的元素指定以下CSS。

#(id名){
    grid-column: （列方向的網(wǎng)格的開始位置）/（列方向的網(wǎng)格的結(jié)束位置）;   
    grid-row: （行方向的網(wǎng)格的開始位置）/（行方向的網(wǎng)格的結(jié)束位置);
    }

或者

.(class名){
   grid-column: （列方向的網(wǎng)格的開始位置）/（列方向的網(wǎng)格的結(jié)束位置）;   
    grid-row: （行方向的網(wǎng)格的開始位置）/（行方向的網(wǎng)格的結(jié)束位置);
    }

或

#(id名){
    grid-column-start: (列方向的網(wǎng)格的開始位置);    
        grid-column-end: (列方向的網(wǎng)格的結(jié)束位置);    
        grid-row-start: (行方向的網(wǎng)格的開始位置);    
        grid-row-end: (行方向的網(wǎng)格的結(jié)束位置);
        }

或者

.(class名){
          grid-column-start: (列方向的網(wǎng)格的開始位置);    
          grid-column-end: (列方向的網(wǎng)格的結(jié)束位置);    
          grid-row-start: (行方向的網(wǎng)格的開始位置);    
          grid-row-end: (行方向的網(wǎng)格的結(jié)束位置);
        }

描述示例

使用網(wǎng)格線指定網(wǎng)格的起始位置和結(jié)束位置。

在下面的代碼的情況下，單元的寬度是從第二柵格的垂直線到第四柵格的垂直線。

 grid-column: 2 / 4;

代碼示例

創(chuàng)建以下CSS、HTML文件。

SimpleGrid.css

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

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
  
  
  

說明：

下面的容器的CSS描述創(chuàng)建一個4行×2行的網(wǎng)格。

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 160px;    
    grid-template-rows: 120px 120px;    
    border:solid #ff6a00 1px;
}

網(wǎng)格的每個元素的CSS將是（GridItem 1~GridItem 8）。我們?yōu)槊總€網(wǎng)格定義網(wǎng)格單元。為網(wǎng)格的每個單元格更改背景顏色。

.GridItem1 {
    grid-column: 1 / 2;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}

顯示結(jié)果

使用Firefox瀏覽器顯示上述HTML文件。將顯示如下所示的效果。創(chuàng)建2行×4列的網(wǎng)格，并在每個單元格中顯示字符串“item n”。此外，可以為每個單元設(shè)置單元的背景顏色。

同樣，在Google Chrome中顯示相同的文件。將顯示如下所示的效果。

在IE瀏覽器中無法完成網(wǎng)格顯示并且顯示已折疊。

所有網(wǎng)格中都沒有單元格的示例

雖然前面的例子介紹了那里是在小區(qū)內(nèi)的所有網(wǎng)格的選項的情況下，它會如果在所有網(wǎng)格的任何項目甚至工作。以下是網(wǎng)格中稀疏（離散）單元格的示例。

代碼

創(chuàng)建以下CSS，HTML文件。

SimpleGridSparse.css

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 160px;    
    grid-template-rows: 120px 120px;    
    border: solid #ff6a00 1px;    
    background-color:#E0E0E0;
}
.GridItem1 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}
.GridItem2 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color: #ffcb70;
}
.GridItem3 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
}

SimpleGridSparse.html

  
  
  
  
  
  

    
內(nèi)容1
    
內(nèi)容2
    
內(nèi)容3
  
  
  

 display: grid;  
 grid-template-columns: 160px 160px 160px 160px;  
 grid-template-rows: 120px 120px;

網(wǎng)格的單元部分的CSS如下。這次它是一個2×4 8格的網(wǎng)格，但我們只在里面安排了3個單元格。容器的第一行中的第二列，第二行中的單元的第三列，并把內(nèi)容的幀在三個地方中的第一行中的單元的第四列。

.GridItem1 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}
.GridItem2 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color: #ffcb70;
}
.GridItem3 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
}

網(wǎng)格的HTML部分。描述網(wǎng)格框架內(nèi)的三個div框架。

    
內(nèi)容1
    
內(nèi)容2
    
內(nèi)容3
  

顯示結(jié)果

我們將在Firefox瀏覽器中顯示上述HTML。將顯示如下所示的效果。內(nèi)容框架放置在CSS指定的位置。

Google Chrome中顯示的效果如下所示。

看完上述內(nèi)容，你們對如何使用CSS網(wǎng)格布局grid有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞名稱：如何使用CSS網(wǎng)格布局grid-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://weahome.cn/article/doipjc.html