利用CSS网格布局实现网格的流程

本文主要介绍了利用CSS网格布局实现网格的流程。





在HTML文档的文档流，而事实上在CSS网格布局网格流。简单点理解就是，在对网格容器的显式声明，其所有的子元素自动确定为网格单元，网格细胞没有显式设置一个明确的定位，浏览器将自动为网格计算的位置，按照从左到右的顺序，或从上到下的安排。这是在这里被称为网格的流动。

在介绍网格流的相关内容之前，我们首先回顾一下简单的效果。通常在网页的制作中，经常会遇到产品列表显示页面，或者相册显示页面的效果：



要达到以上效果图，人们通常使用float和显示：内联块的方法来实现大部分的时间，但这些方法都或多或少的受到限制。所以在CSS网格布局，它是相对简单的实现这样的布局。例如，位置是由网格线或网格地区指定的。然而，有一个潜在的问题：如果我们浏览不同的设备和行数是不一致的，我们需要重新分配的地点在媒体查询每个网格，这是更复杂的，这不是我们想要的效果。事实上，在网格布局更方便的方法，这是实现网格流动。这就是我们今天要说的。
网格自动流量

在CSS网格布局中，对网格元素进行显式声明，如果不显式地通过网格线或网格区域指定网格位置，则浏览器将对容器元素（子网格单元）自动布局。

看一个简单的例子，假设有14箱（一~ O）在容器的container.wrapper.the宣言。包装是一个网格，不为任何做出任何明确的定位。箱，这时浏览器会自动布局。箱自动。为了更好的看到效果，在这个例子中，一个偶数。箱被设置了一个绿色的背景颜色：

HTML


复制代码代码如下所示：

一
B
C
D
E
F
H
我
J
K
l
M
n
o



CSS


复制代码代码如下所示：
{。箱
背景：橙色；
身高：100px；
行高：100px；
文本对齐：中心；
颜色：# FFF；
字体大小：3em；
}
框：第n个子（偶数）{
背景：绿色；
}
{。包装
宽度：500px；
border: 1px solid橙；
填料：15px；
保证金：20px汽车；
显示：网格；
网格模板列：重复（5，100像素）；
网格模板行：自动；
}


结果如下：



在线案例

但是，文章的效果还是有点差距。有each.box之间没有空间。我试图为框设置边距值：



在线案例

从效果图中可以明显看出，框模型解析已经发生了变化：



在上面的图片中，我们可以看到，在CSS网格布局，盒模型的大小变为：容器宽度=保证金保证金+右+左左+右+填料填充内容的宽度+左边框宽度+内容。例如，在我们的例子中，。套箱宽度：100px有缘右：15px；这实际上是内容。箱只85px。这种方式对文章的例子开始，如果你需要实现一个一致的效果，你需要做一定的变化。这种变化是集装箱的宽度。包装和网格模板列属性的值：
复制代码代码如下所示：
{。包装
宽度：560px；
border: 1px solid橙；
填料：15px；
保证金：20px汽车；
显示：网格；
网格模板列：重复（5，115px）；
网格模板行：自动；
}

结果如下：



在线案例

也许你会觉得这不像以前那么强大了，是不是有太多的变化如果你不这样认为，那就继续读下去。
网格流动mdash；mdash；柱

网格的自动流行元素布局默认，即网格自动流量价值行。网格细胞沿着线直到没有地方可放（柱方向），以及网格细胞会自动换到下一行。即使没有显式声明的网格，浏览器也将用于创建从网格网格隐式网格。

在实际使用中，可以使用网格自动流属性进行更改，只设置行到列的默认值。网格中的单元格将以列形式显示，如果需要，将自动添加列。

看一个例子，你会更容易理解：
复制代码代码如下所示：
{。包装
宽度：560px；
border: 1px solid橙；
填料：15px；
保证金：20px汽车；
显示：网格；
网格模板列：重复（6，115px）；
网格模板行：115px 115px 115px；
网格自动流：列；
}

结果如下：



在线案例
网格流与定位单元

第一个是网格的容器的所有子元素是根据网格的自动流程设置。从以上简单的例子，我们可以知道，只要在网格容器的子元素可以通过网格流量自动设置，可以自动设置的行或列。有时，一些的次，有些网格需要做一些特殊位置的处理。如果一个或一些网格处理，那么其他网格将自动排列我们将一起讨论这个问题，看看一个简单的例子：
复制代码如下：。包装{宽度：560px边境：；1px solid橙；padding: 15px；保证金：20px汽车；显示：网格；网格模板列：重复（5，115px）；网格模板行：汽车；}。B网格列：{ 3 / 6 / 3；网格行：2；概述：2px固体红；}。F网格面积：{ 3 / 1 / 4 / 6；背景颜色：# F36；概述：2px固体红；}
结果如下：



在线案例

在这个例子中，盒子。B，通过网格线，取代B在新的位置，但这并不影响电网的自动流程的默认位置。B将由C元素在它的后面。在同样的方式，在F元素迁移。，添加其他元素。和。F扩展拥有多重网格细胞和其他细胞会自动回来。如上图所示。
总结

通过一个简单的例子，我们告诉你如何自动安排网格细胞在CSS网格布局，以及如何明确设置自动排列的方向通过grid-auto-flow.finally，给出一个例子来表明你是否在自我网格定位设置的网格将影响电网自动化流程。但如果你看到的最后一个例子，你赢了不要再问这个问题，因为效果会告诉你一切。

此外，网格自动流量带边查询和媒体查询将能够更好地实现相册在网络中的相关布局，并且产品将显示相关的布局，当然，在此基础上还可以扩展更有意义的布局效果。