首頁  >  文章  >  web前端  >  CSS網格佈局(grid)的用法詳解

CSS網格佈局(grid)的用法詳解

不言
不言原創
2018-11-14 15:10:524459瀏覽

網頁中的佈局是多種多樣的,合適的佈局可以讓網頁更加美觀,使用CSS的網格佈局,您可以使用帶有簡單描述的網格佈局創建複雜的列。在本文中,我們基於一個簡單的例子介紹了CSS的Grid Layout介紹。

我們先來看看容器框架

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


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

還有一個設定內部網路格的方法。

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

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

網格框架(專案架構) 

# 為成為網格框架的元素指定下列CSS。

#(id名){
    grid-column: (列方向的网格的开始位置)/(列方向的网格的结束位置);   
    grid-row: (行方向的网格的开始位置)/(行方向的网格的结束位置);
    }

.(class名){
   grid-column: (列方向的网格的开始位置)/(列方向的网格的结束位置);   
    grid-row: (行方向的网格的开始位置)/(行方向的网格的结束位置);
    }


#(id名){
    grid-column-start: (列方向的网格的开始位置);    
        grid-column-end: (列方向的网格的结束位置);    
        grid-row-start: (行方向的网格的开始位置);    
        grid-row-end: (行方向的网格的结束位置);
        }

.(class名){
          grid-column-start: (列方向的网格的开始位置);    
          grid-column-end: (列方向的网格的结束位置);    
          grid-row-start: (行方向的网格的开始位置);    
          grid-row-end: (行方向的网格的结束位置);
        }

描述範例

##使用網格線指定網格的起始位置和結束位置。

在下面的程式碼的情況下,單元的寬度是從第二柵格的垂直線到第四個柵格的垂直線。

 grid-column: 2 / 4;

程式碼範例

建立下列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

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGrid.css" />
  </head>
  <body>
  <div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
    <div class="GridItem4">内容4</div>
    <div class="GridItem5">内容5</div>
    <div class="GridItem6">内容6</div>
    <div class="GridItem7">内容7</div>
    <div class="GridItem8">内容8</div>
  </div>
  </body>
  </html>

說明:

下面的容器的CSS描述建立一個4行×2行的網格。

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

網格的每個元素的CSS將是(GridItem 1~GridItem 8)。我們為每個網格定義網格單元。為網格的每個單元格變更背景顏色。


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

顯示結果

使用Firefox瀏覽器顯示上述HTML檔案。將顯示如下所示的效果。建立2行×4列的網格,並在每個單元格中顯示字串「item n」。此外,可以為每個單元設定單元的背景顏色。

CSS網格佈局(grid)的用法詳解

同樣,在Google Chrome中顯示相同的檔案。將顯示如下所示的效果。


CSS網格佈局(grid)的用法詳解

在IE瀏覽器中無法完成網格顯示並且顯示已折疊。

所有網格中都沒有單元格的範例

雖然前面的範例介紹了那裡是在小區內的所有網格的選項的情況下,它會如果在所有網格的任何項目甚至工作。以下是網格中稀疏(離散)單元格的範例。

程式碼

建立以下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

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGridSparse.css" />
  </head>
  <body>
  <div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
  </div>
  </body>
  </html>

##說明:

#透過下列程式碼,網格的外框是2行×4列的網格。

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

網格的單元部分的CSS如下。這次它是一個2×4 8格的網格,但我們只在裡面安排了3個單元格。容器的第一行中的第二列,第二行中的單元的第三列,並把內容的幀在三個地方中的第一行中的單元的第四列。

.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;
}

網格的HTML部分。描述網格框架內的三個div框架。

<div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
  </div>

顯示結果

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

CSS網格佈局(grid)的用法詳解Google Chrome中顯示的效果如下所示。

以上是CSS網格佈局(grid)的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn