CSS網格佈局（grid）的用法詳解-css教學-PHP中文網

網頁中的佈局是多種多樣的，合適的佈局可以讓網頁更加美觀，使用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中文網其他相關文章！