CSS Grid布局:网格的流动

HTML文档中有文档流,其实在CSS Grid Layout中有网格流。简单点理解就是,在一个被显式声明为网格的容器中,其所有子元素自动被认定为网格单元格,而这些网格单元格在没有被显式设置明确位置时,浏览器将会自动为这些网格单元格的位置进行计算,按照先后顺序从左向右,或从上到下排列。在这里把这种方式称之为网格的流动。

在具体介绍网格流动相关内容之前,我们先一起来回忆一个简单的效果。平时在Web页面制作当中,经常会碰到产品列表展示页面,或者说相册展示页面的效果。如下图所示:

图片相册

实现上图的效果,大家平时大多会采用floatdisplay:inline-block等方法实现。但这些方法或多或少存在一定的局限性。那么在CSS Grid Layout中,实现这样的布局相对而言会简单多。比如通过网格线,或者网格区域来明确指定各自的位置。不过这样一来,就存在一个潜在的问题:如果在不同的设备上浏览,每行展示的数量不一致时,需要在媒体查询中为每个网格重新指定位置,这变得更为复杂。也不是我们希望的效果。其实在网格布局中还有一种更方便的方法,就是采用网格流来实现。这也是我们今天要说的内容 。

网格的自动流

在CSS Grid Layout中,给元素显式的声明网格,如果没有显式的通过网格线或者网格区域明确指定网格的位置,那么浏览器将会对容器内子元素(网格单元格)进行自动布局

来看一个简单的示例,假设容器.wrapper中有14个.box(A~O)。容器.wrapper显示的声明为网格,并且不对任何.box做显式的位置定位,这个时候浏览器会自动为.box进行自动布局。为了更好的看到效果,在这个示例中给偶数的.box设置了一个green背景色:

HTML
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b"&gt
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/grid-auto-flow.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部