使用网格grid布局实现bootstrap的栅格系统

记得在接触Bootstrap框架的时候，主要就是被其栅格系统所吸引，对于当时构建一个响应式的网站特别方便，记得当时学Bootstrap还买了一些书(基本都是官网文档的复制黏贴😔)，这就是英语太戳的弊端(想要学习一手资料还得好好学习英语)。最近在学习新技术grid布局，发现其用来实现栅格系统尤其方便，让我们一起coding吧。

栅格系统

随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

栅格参数

bootstrap栅格参数

编写栅格

Bootstrap的栅格是移动端优先的，所以我们定义列的时候，先定义大屏幕的列样式，依次定义到最小屏幕的列样式，这样可以使得最后定义的样式覆盖前面定义的样式，从而达到移动端优先的效果。

如何把一个grid划分为12列呢？

grid提供了grid-template-columns来设置列宽，使用关键字fr,用来表示比例关系，所以设置为：grid-template-columns: 1fr 1fr,效果是该grid分为两列，每列所占据的比例为50%。所以我们要分成12列，只需要写12个1fr即可，查看了文档，发现有repeat方法来重复，所以只需要设置为grid-template-columns: repeat(12, 1fr)便可把grid划分为均等的12列。然后依次对1列宽到12列举的样式进行编写。

由于是12列，如果手工写，维护性不好且代码量大，这里使用了less作为预处理器来编写，首先我们先定义个函数。

1
2
3
4
5
.loop-col(@name, @n, @i) when(@i <= @n) {
  .col-@{name}-@{i} {
    grid-column: span @i;
  }
}

grid-column用来设置项目占据几列宽度，如需占据6列宽，设置为: grid-column: span 6。

由于我们是移动端(也就是超小屏幕)优先，所以我们默认让非超小屏幕(sm、md、lg)的每列占据一行，也就是grid-column: span 12，然后当媒体查询到对应的屏幕大小，再进行设置。

为了便于设置每列占据一行，定义以下函数:

1
2
3
4
5
6
.loop-big-col(@name, @n, @i) when(@i <= @n) {
  .col-@{name}-@{i} {
    grid-column: span 12;
  }
  .loop-big-col(@name, @n, @i + 1);
}

下面我们来加入媒体查询:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 非超小屏幕，默认都独占一行
// .col-md-{1-12} .col-sm-{1-12} .col-lg-{1-12} grid-column: span 12
.loop-big-col(lg, 12, 1);
.loop-big-col(md, 12, 1);
.loop-big-col(sm, 12, 1);

//超小屏幕列设置
// 因为移动端优先，所以我们不使用媒体查询，默认设置xs的列样式
// .col-xs-{1-12} grid-column: span { 1-12 }
.loop-col(xs, 12, 1);

@media (min-width: 768px) {
  /* 小屏幕 */
  // 重新设置 .col-sm-{1-12} grid-column: span { 1-12 }
  .loop-col(sm, 12, 1);
}

@media (min-width: 992px) {
  /* 中等屏幕 */
  // .col-md-{1-12} grid-column: span { 1-12 }
  .loop-col(md, 12, 1);
}

@media (min-width: 1200px) {
  /* 大屏幕 */
  // .col-lg-{1-12} grid-column: span { 1-12 }
  .loop-col(lg, 12, 1);
}

通过上面代码，我们就可以实现一个简单的栅格系统了。点击查看

看到Bootstrap还支持列的偏移、列的排序，让我们来完善下吧。

列偏移

Bootstrap中是通过增加margin边距来实现偏移，grid中有什么属性可以支持吗？

(⊙﹏⊙)，暂时没找到方法支持偏移

列排序

push通过设置left来实现，pull通过设置`right·来实现。

(⊙﹏⊙)，暂时没找到方法支持排序

补充

有时候我们会需要设置列间距,我们可以通过属性grid-column-gap来实现。行间距则为grid-row-gap。

参考文章

CSS Grid 网格布局教程

推荐文章