CSS网格布局对我来说是一个全新的布局，但许多其他国家的朋友已经充分意识到布局。在前面，我们花了两个内容（CSS网格布局教程网格布局和CSS网格布局教程浏览器打开CSS网格布局的总结是什么），为这条路也许你想知道的是如何使用它你不要着急，然后通过各种例子来说明CSS的网格布局，让我们一起来了解它的魅力。
当然，下一个例子是不是我想出来的，这就是我挖了出来，主要制作人是Rachel Andrew。在继续阅读，我们应该感谢Rachel Andrew，感谢他给我们的CSS网格布局这样的例子很多。同时，如果你想成为能在你的浏览器上正常的CSS网格布局的例子，接下来的表现，你必须首先确保您已经阅读浏览器的CSS网格的CSS网格布局的开放式布局教程汇总一文，并根据文中所述方法进行设置。如果你没有的话，你可以不看下面的例子的影响。我们不必纠结，打击。
定义一个网格
可以将父容器的显示属性设置为网格或内联网格来定义网格。
在这个例子中，有三列，创建一个网格，三列宽度100px，并指定各列之间的间距为10px。同时，网格有三行，每行的高度是自动的，和行与行之间的距离10px。简单一点的是三行和三列的网格，在一排排，行与行之间的间距是10px。
此时，浏览器自动填充容器中的每个单元格元素。当列的数量超过指定的数字时，网格将自动更改行，如下图所示。
查看代码是如何完成的。
HTML
复制代码代码如下所示：
一
B
C
D
E
F
G
H
我
J
CSS
复制代码代码如下所示：
{体
填料：50px；
}
{。包装
显示：网格；
网格模板列：100px 10px 100px 10px 100px；
网格模板行：汽车10px汽车；
}
{。箱
背景颜色：# 444；
颜色：# FFF；
字体大小：150%；
填料：20px；
}
B，D，G，我{
背景颜色：红色；
}
定义网格的关键代码：
复制代码代码如下所示：
{。包装
显示：网格；
网格模板列：100px 10px 100px 10px 100px；
网格模板行：汽车10px汽车；
}
在线案例
从这个例子中，我们可以看到，包装容器定义的显示网格，并定义为网格，利用网格模板列：100px 10px 100px 10px 100px和网格模板行：汽车10px汽车；柱间距，lecoing，行高和行间的间距的规定。相应的子元素。A，C，E，F，。。。H。J列100px宽度（即黑色区域），而B、D、G和我是列和列之间的距离（即红色区域），但是当一行中的元素填充时将包裹，例如，F ~ {J}.自动更改为第二行显示。
基于网格线的占空区
网格中的细胞是由一个网格线，所以在网格布局，也可以使用一个网格线的子元素设置占地面积的基础上，在容器中十个子元素，~。j.wrapper下面，然后看看如何基于网格线来实现各个网格布局区域。
对于网格线，网格布局有两种，一种是线，另一种是线，相应的网格单元有线起始线（网格列开始）、线终止线（网格柱端）和线起始线（网格行开始）和线结束线（网格行结束）。
如上所示，紫色是行网格线，而蓝色是行网格线。明亮的红细胞柱突出线系，列终止线道为直线的起点线3号线，和线终止线之处。也就是说，四的网格线之间的区域是一个单元。
接下来，请看一个如何使用网格线来实现单元占用区域的示例：
HTML
复制代码代码如下所示：
一
B
C
D
E
F
G
H
我
J
CSS
复制代码代码如下所示：
{体
填料：50px；
}
{。包装
显示：网格；
网格模板列：100px 10px 100px 10px 100px 10px 100px；
网格模板行：汽车10px汽车10px汽车；
}
{。箱
背景颜色：# 444；
颜色：# FFF；
字体大小：150%；
填料：20px；
文本对齐：中心；
}
一个{。
网格列开始：1；
网格列结束：2；
网格行起始：1；
网格行结束符：2；
}
{。B
网格列开始：3；
网格列结束：4；
网格行起始：1；
网格行结束符：2；
}
{ C。
网格列开始：5；
网格列结束：6；
网格行起始：1；
网格行结束符：2；
}
{。D
网格列开始：7；
网格列结束：8；
网格行起始：1；
网格行结束符：2；
}
{。E
网格列开始：1；
网格列结束：2；
网格行起始：3；
网格行结束符：4；
}
{。F
网格列开始：3；
网格列结束：4；
网格行起始：3；
网格行结束符：4；
}
{。G
网格列开始：5；
网格列结束：6；
网格行起始：3；
网格行结束符：4；
}
{。H
网格列开始：7；
网格列结束：8；
网格行起始：3；
网格行结束符：4；
}
{。我
网格列开始：1；
网格列结束：2；
网格行起始：5；
网格行结束符：6；
}
{ {J}.
网格列开始：3；
网格列结束：4；
网格行起始：5；
网格行结束符：6；
}
在线案例
这种方式，你可以把你的子元素，~。B在任何位置，例如，你想改变，和F，现在，所以很容易做：
复制代码代码如下所示：
一个{。
网格列开始：3；
网格列结束：4；
网格行起始：3；
网格行结束符：4；
背景：红色；
}
{。F
网格列开始：1；
网格列结束：2；
网格行起始：1；
网格行结束符：2；
背景：橙色；
}
操作的效果如下：
在线案例
网格线速记
前两个示例向您展示了如何使用布局来实现布局，这既简单又方便。唯一的问题是写代码麻烦，什么格栏开始，格子柱结束等等。事实上，有一个简单的方法可以让你免受痛苦。
网格线的缩写实际上是网格列和网格行的开始值和结束值的组合，这些行是由分隔的：
复制代码代码如下所示：
一个{。
网格列开始：1；
网格列结束：2；
网格行起始：1；
网格行结束符：2；
}
它可以写成：
复制代码代码如下所示：
一个{。
网格列：1 2；
网格行：1 2；
}
因此，上面的代码，我们可以改成速记：
复制代码代码如下所示：
一个{。
网格列：1 2；
网格行：1 2；
}
{。B
网格列：3 4；
网格行：1 2；
}
{ C。
网格列：5 6；
网格行：1 2；
}
{。D
网格列：7 8；
网格行：1 2；
}
{。E
网格列：1 2；
网格行：3 4；
}
{。F
网格列：3 4；
网格行：3 4；
}
{。G
网格列：5 6；
网格行：3 4；
}
{。H
网格列：7 8；
网格行：3 4；
}
{。我
网格列：1 2；
网格行：5 6；
}
{ {J}.
网格列：3 4；
网格行：5 6；
}
效果仍然：
在线案例
网格区域的元素占据区
在CSS网格布局的关键东、网格面积grid-area.grid区是由四个网格线的空间。简单地说，网格单元也是一个网格区域（因为它有一个由四条网格线组成的空间）。多个单元的合并也是一个网格区域，因此，为了达到这种效果，还可以使用网格区域完成区域网格。
在一个具体的案例是，一个简单的了解，网格线组成的网格区域，网格线组成的网格区域的顺序开始排/列/行开始结束/ column-end.each网格线也用/分隔。
下一个示例将使用网格区域转换，代码样式转换如下：
复制代码代码如下所示：
{。包装
显示：网格；
网格模板列：100px 10px 100px 10px 100px 10px 100px；
网格模板行：汽车10px汽车10px汽车；
}
一个{。
网格区域：1 1 2 2；
}
{。B
网格区域：1 3 2 4；
}
{ C。
网格区域：1 5 2 6；
}
{。D
网格区域：1 7 2 8；
}
{。E
网格区域：3 1 4 2；
}
{。F
网格区域：3 3 4 4；
}
{。G
网格区域：3 5 4 6；
}
{。H
网格区域：3 7 4 8；
}
{。我
网格区域：5 1 6 2；
}
{ {J}.
网格区域：5 3 6 4；
}
结果如下：
在线案例
让你的世界更容易吗。
总结
本文主要通过几个简单的例子来演示如何使用网格的定义，以及如何使用网格布局，可以说，这样的布局单元格和表格不吸，什么东西是不一样的，但现实是残酷的，我们的布局是像明星万，没有那么简单。它不是CSS网格布局是非常强大的，你怎么实现一些复杂的布局请注意本章的分解，并说明如何实现细胞合并的效果。
