今天就跟大家聊聊有關如何使用CSS網格布局grid，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
我們先來看一下容器框架
#(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中顯示相同的文件。將顯示如下所示的效果。
在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指定的位置。
Google Chrome中顯示的效果如下所示。
看完上述內容，你們對如何使用CSS網格布局grid有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
