网页设计编辑网格 第1篇
一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子, 一旦一个网格元素被定义在一个父级元素当中，那么他的子级元素将会排列在每个事先定义好的网格单元中。在下面的图中，我会将第一个网格单元作高亮处理。
网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于_L_形的网格区域。下图高亮的网格区域扩展了2列以及2行。
网页设计编辑网格 第2篇
运动员练习时都绑着沙袋还记得吗，有限制的练习，之后再脱去舒服，跑的更快。因此，可以试着自我约束一下，练习在限制的条件下进行布局，这样你就能更专注于重点，进步更大。
注意空间问题.
每一栏之间的宽度越大，留给元素的空间越富裕。然而不要忘记垂直方向上的空间布局。是紧密还是充满留白？这需要按情况而定。
现在你对网格系统已经了解了大概。可以尝试一下在设计前多做规划，这样网格系统用起来更得心应手，布局更流畅，多想想结构，多想想怎样分栏的布局方式来规划内容。
网格系统是一种好的习惯，也是一种格式化的设计工具。有了它，你能更专注于内容呈递，更专注于强调重点。 原文地址：webdesign优设网翻译：@MartinRGB
网页设计编辑网格 第3篇
设置每一个块状体彼此之间的距离
显式网格是我们用 grid-template-columns 或 grid-template-rows 属性创建的。而隐式网格则是当有内容被放到网格外时才会生成的。
隐式网格会自动生成，根据我们所设置的相关参数持续排布。若没有指定行的大小，则默认为auto
设置列：每一列最小200px宽度，最大1fr的比例，根据大小自动生成有多少列数
设置行：最小100px的高度，最大不设限
网页设计编辑网格 第4篇
一般而言，会自动将网格布局所含概的子类类别自动按照代码顺序填充进去
grid-column 是 CSS Grid 布局中的一个属性，用于指定一个网格项目在网格中的列位置。它可以定义项目开始和结束的列线，控制项目跨越的列数。
第一个块状体的末尾线默认为第二个块状体的起始线。
span所定义跨越2列
grid-column-start 是 CSS Grid 布局中的一个属性，用于指定网格项目开始在哪一列的网格线。它可以单独使用，也可以和 grid-column-end 配合使用来定义项目跨越的列范围。
搭配grid-column-end: