网页中的布局是多种多样的，合适的布局可以让网页更加美观，使用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
说明：
下面的容器的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）。我们为每个网格定义网格单元。为网格的每个单元格更改背景颜色。
酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描
.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
说明：
通过以下代码，网格的外框是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框架。
内容1内容2内容3
显示结果
我们将在Firefox浏览器中显示上述HTML。将显示如下所示的效果。内容框架放置在CSS指定的位置。
Google Chrome中显示的效果如下所示。
