網頁中的佈局是多種多樣的,合適的佈局可以讓網頁更加美觀,使用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」。此外,可以為每個單元設定單元的背景顏色。 同樣,在Google Chrome中顯示相同的檔案。將顯示如下所示的效果。
所有網格中都沒有單元格的範例
雖然前面的範例介紹了那裡是在小區內的所有網格的選項的情況下,它會如果在所有網格的任何項目甚至工作。以下是網格中稀疏(離散)單元格的範例。程式碼
建立以下CSS,HTML檔。.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;
.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; }
<div class="Container"> <div class="GridItem1">内容1</div> <div class="GridItem2">内容2</div> <div class="GridItem3">内容3</div> </div>
我們將在Firefox瀏覽器中顯示上述HTML。將顯示如下所示的效果。內容框架放置在CSS指定的位置。
Google Chrome中顯示的效果如下所示。
以上是CSS網格佈局(grid)的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!