CSS网格布局

前端
CSS
作者

yangjh

发布日期

October 30, 2021

网格(Grid)是水平线和垂直线的集合,使用网格排版,可使元素在页面之间移动时不会跳动或改变宽度,从而在网站上提供更高的一致性。要定义网格,需要将display的值设为grid

指定列的数量

通过 grid-template-columns 属性可在网格中添加列。其值可以是固定值,也可以是柔性的fr,还可以通过repeat()函数指定。

grid-template-columns: 200px 200px 200px;
grid-template-columns: 2fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

网格之间的间距

使用属性grid-column-gap来表示列之间的间隙,grid-row-gap为行的间隙,grid-gap可同时设置两者。这些间隙可以是任何长度单位或百分比,但不能是fr单位。

网格的大小

默认根据内容生成宽和高,但也可以通过grid-auto-rowsgrid-auto-columns来指定大小。minmax()函数可让我们设置最小和最大值。

网格布局案例一

基于行的位置设置

我们可以通过指定开始和结束行来根据这些行放置内容。

  1. grid-column-start
  2. grid-column-end
  3. grid-row-start
  4. grid-row-end

这些属性都可以使用行号作为值。还可以使用速记属性,一次指定起始行和结束行,并以斜杠字符分隔。

  1. grid-column
  2. grid-row

网格模板区域

在网格上放置项目的另一种方法是使用grid-template-areas属性,并为设计的各个元素命名。规则如下:

  1. 需要填充网格的每个单元格。
  2. 要跨越两个单元格,请重复该名称。
  3. 若要使一个单元格为空,请使用.
  4. 区域必须为矩形。
  5. 区域不能在不同的位置重复。

参考资料

  1. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
回到顶部