CSS网格布局（grid）的用法详解

互联网 18-11-14

网页中的布局是多种多样的，合适的布局可以让网页更加美观，使用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文件。

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

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

显示结果

使用Firefox浏览器显示上述HTML文件。将显示如下所示的效果。创建2行×4列的网格，并在每个单元格中显示字符串“item n”。此外，可以为每个单元设置单元的背景颜色。

在IE浏览器中无法完成网格显示并且显示已折叠。

所有网格中都没有单元格的示例

虽然前面的例子介绍了那里是在小区内的所有网格的选项的情况下，它会如果在所有网格的任何项目甚至工作。以下是网格中稀疏（离散）单元格的示例。

代码

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;

.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）的用法详解的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：网格布局

CSS网格布局（grid）的用法详解

相关资讯

标签推荐