CSS Grid布局实现网格的流动

1、css grid布局实现网格的流动html文档中有文档流，其实在css grid layout中有网格流。容易点理解就是，在一个被显式声明为网格的容器中，其全部子元素自动被认定为网格单元格，而这些网格单元格在没有被显式设置明确位置时，扫瞄器将会自动为这些网格单元格的位置举行计算，根据先后挨次从左向右，或从上到下罗列。在这里把这种方式称之为网格的流淌。在详细介绍网格流淌相关内容之前，我们先一起往返忆一个容易的效果。平常在web页面制作当中，常常会遇到产品列表展示页面，或者说相册展示页面的效果。如下图所示：实现上图的效果，大家平常大多会采纳float和display:inline-block等办法

2、实现。但这些办法或多或少存在一定的局限性。那么在css grid layout中，实现这样的布局相对而言会容易多。比如通过网格线，或者网格区域来明确指定各自的位置。不过这样一来，就存在一个潜在的问题：假如在不同的设备上扫瞄，每行展示的数量不全都时，需要在媒体查询中为每个网格重新指定位置，这变得更为复杂。也不是我们希翼的效果。其实在网格布局中还有一种更便利的办法，就是采纳网格流来实现。这也是我们今日要说的内容 。网格的自动流在css grid layout中，给元素显式的声明网格，假如没有显式的通过网格线或者网格区域明确指定网格的位置，那么扫瞄器将会对容器内子元素（网格单元格）举行自动布局。来看

3、一个容易的示例，假设容器.wrapper中有14个.box(ao)。容器.wrapper显示的声明为网格，并且不对任何.box做显式的位置定位，这个时候扫瞄器会自动为.box举行自动布局。为了更好的看到效果，在这个示例中给偶数的.box设置了一个green背景色：html 复制代码代码如下:abcdefhijklmno css 复制代码代码如下:.box background: orange;height: 100px;line-height: 100px;text-align: center;color: fff;font-size: 3em;.box:nth-child(even)back

4、ground: green;.wrapper width: 500px;border: 1px solid orange;padding: 15px;margin: 20px auto; display: grid; grid-template-columns: repeat(5, 100px);grid-template-rows: auto ; 效果如下：在线案例不过离文章所示效果还是略有差距，每个.box之间没有间距，我尝试着给.box设置margin值：在线案例从效果图中可以显然看出，盒模型解析已做出变幻：上图中可以得知，在css grid layout中盒模型大小计算变成：容器wid

5、th = margin-left + margin-right + padding-left + padding-right + content width + border-left-width + border-right+width。比如我们这个示例中，.box设置width:100px，并且有一个margin-right:15px;那事实上.box的内容宽度仅惟独85px。这样一来与文章开始示例相左，假如需要做到全都效果，还需对其做一定的变幻。这个变幻就是对容器.wrapper的宽度和grid-template-columns属性值： 复制代码代码如下:.wrapper width:

6、560px;border: 1px solid orange;padding: 15px;margin: 20px auto;display: grid;grid-template-columns: repeat(5, 115px);grid-template-rows: auto ;效果如下：在线案例或许你会感觉这并没有强大到哪呀，跟以前用法float有太多的变幻吗？假如你觉得没有，那请继续往下阅读。网格流淌——列网格的自动流，在默认状况下都是以行来给元素布局，也就是说grid-auto-flow取值为row。让网格单元格沿着行布局，直到没有可放区域（

7、列的方向），网格单元格会自动换行到下一行罗列。哪怕没有显式的声明网格，扫瞄器也会为创建隐式网格的轨道，用来放自网格单元格。在实际用法中，可以用法grid-auto-flow属性来做修改，只需要把其默认值row设置成column。网格中的单元将会按列显示，假如需要，还会自动添加列。一起来看一个示例，你将更易理解： 复制代码代码如下:.wrapper width: 560px;border: 1px solid orange;padding: 15px;margin: 20px auto;display: grid;grid-template-columns: repeat(6, 115px);g

8、rid-template-rows: 115px 115px 115px;grid-auto-flow: column;效果如下：在线案例网格流与定位元素前两介绍的都是网格容器全部子元素都是根据网格自动流罗列。从上面容易的示例中可以得知，只要是网格容器中的子元素，通过grid-auto-flow都可以让其在网格容器中按列，或按行自动罗列。可往往有些时候，有些网格需要做一些特别定位处理。假如其中某个或某几个网格做了特别处理，那么其他网格还会自动罗列？我们将带着这个问题来一起看一个容易的示例： 复制代码代码如下:.wrapper width: 560px; border: 1px solid or

9、ange; padding: 15px; margin: 20px auto; display: grid; grid-template-columns: repeat(5, 115px); grid-template-rows: auto ;.b grid-column: 3 / 6; grid-row: 2 / 3; outline: 2px solid red;.f grid-area: 3 / 1 / 4 / 6; background-color: f36; outline: 2px solid red;效果如下：在线案例在这个示例中，盒子.b,通过网格线，将b重新定位新位置上，但这样并没有影响网格的自动流。.b所在的默认位置将由其后面的.c元素补上。同样的,.f元素重新定位后，别的元素补上。而且.f扩展占有多个网格单元格，那么其他的单元格就会自动往后移。如上图所示。总结文章中通过容易示例向大家演示了css grid layout中网格单元格自动罗列的实现办法，以及如何通过grid-auto-flow来显式设置自动罗列的方向。最后用一个示例向大家展示了，自动罗列的网格中，其中某个或