浅谈Grid布局

发表于 |

CSS Grid布局一个基于网格的二维布局系统，Grid布局是web的第一个真正的布局系统。他的目的是将内容组织成行列的形式。他的出现彻底终结了web开发从蛮荒时代的table->float->position->flex的经历。而是直接带我们进入了网格的布局的时代。

引言

Grid布局在各个浏览器的最新版兼容性已经做的非常好了，但是如果你需要兼容低版本的浏览器，还需要慎重的使用。网上对网格布局的概述已经足够多了，所以本文直接从Grid布局的用法与属性来介绍了。

启用网格布局

首先我们使用display的属性来定义一个网格容器，他的grid值决定了容器展现是块级还是内联。一旦启用网格容器，它的所有子元素都进入grid文档流，称为网格子项。

1
display: grid | inline-grid | subgrid
  • grid 定义一个块级的网格容器。
  • inline-grid 定义一个内联网格容器。
  • subgrid 定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项。

在设置了grid布局之后，column, float, clear和vertical-align 对网格容器没有效果。

grid-template-columns / grid-template-rows

grid-template-columns用来设置网格列的名称和宽度。grid-template-rows用来设置网格行的名称和高度。

1
2
grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
grid-template-rows:    <track-size> ... | <line-name> <track-size> ... ;

属性：

track-size: 非负的值，可以使用css长度单位或者百分比。当设置为auto时会根据空间自动分配。
line-name: 网格线的名字，可以是任意的名字。

使用fr单位可以将容器分成几等份，如果与px或者%混用的话则会平分剩下的空间，栗子

1
2
3
4
.test{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

定义的宽度如果包含重复的部分则可以使用repeat()来重复。

1
2
3
4
.test{
  display: grid;
  grid-template-columns: repeat(3, 20px);
}

上面的代码会重复3个20px的列，repeat同样也可以用在grid-template-rows上。

grid-column-gap / grid-row-gap

用来控制单元格的间距, 间距仅设置在单元格之间不作用在容器的边缘。

1
2
3
4
5
6
7
.test{
  display:grid;
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

justify-items / align-items

justify-items垂直与列网格线对齐，适用于网格容器里面所有网格项。
align-items垂直与行网格线对齐，适用于网格容器里面所有网格项。

1
2
3
4
start:   左对齐。 / 顶部对齐
end:     右对齐。 / 底部对齐
center:  居中对齐。 / 居中对齐
stretch: 填满（默认） / 填满（默认）

justify-content / align-content

如果使用的是px这样的单位的话，总的网格区域可能小于网格容器，这个时候justify-content可以设置网格区域的对齐方式。

1
2
3
4
5
6
7
start:         左对齐。
end:           右对齐。
center:        居中对齐。
stretch:       填满网格容器。
space-around:  网格项两边间距相等，网格项之间间隔是单侧的2倍。
space-between: 两边对齐，网格项之间间隔相等。
space-evenly:  网格项间隔相等。

hi you can see me