CSS 栅格系统

发表于   |   分类于

Grid

CSS 栅格布局中最重要的两个元素是 wrapper（parent） 和 items（children）。wrapper 实际上就是栅格，而 items 就是栅格里面的元素。

以下面的代码为例：

1
2
3
4
5
6
7
8
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

让这个 div 标签成为栅格，我们只需将他的 display 属性设置为 grid：

1
2
3
.wrapper {
    display: grid;
}

在我们还未做任何后续操作的时候它看起来是这样的：

Columns and rows

我们需要为这个容器定义行和列，现在将这个容器分割成两行三列，需要用到 grid-template-row 和 grid-template-column 属性：

1
2
3
4
5
.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

当我们这样去定义 grid-template-columns 时，我们将得到三列，列长就是我们设置的大小，同理 grid-template-rows 也是一样。

于是我们得到下面的结果：

为了看清楚他们之间的关系，我们修改下代码再看看结果：

1
2
3
4
5
.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 30px;
}

会得到以下样式：

Items

接下来需要了解的是，在栅格系统中的元素是如何放置的。

我们创建一个 3*3 的栅格，HTML 仍然使用前面的：

1
2
3
4
5
.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

会出现：

你会发现我们的结果中展示的是 3*2 的栅格，而我们在 CSS 代码中定义的是 3*3的栅格，那是因为我们的容器中只有六个元素，如果我们在 HTML 中定义了 9 个元素，那么结果就会是一个 3*3 的栅格

为了重新定位并调整这些元素的大小，我们要对该元素使用 grid-column 和 grid-row 属性

1
2
3
4
.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

上面的代码意图是，我们想让 item1 的起点在第一列并且终止在第四列，也就是说，我们想让它独占一行，下面是运行的结果：

前面代码中的 grid-column-end: 4; 可能会让人产生困惑，因为我们实际结果中只得到了三列，但是看看下面的图片就能明白了：

当第一个元素占满第一行时，其他的元素将向下顺延。

上面那段代码其实还有一种更简单的写法：

1
2
3
.item1 {
    grid-column: 1 / 4;
}

接下来我们来做一些更复杂一点的操作：

1
2
3
4
5
6
7
8
9
10
11
12
.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

下面是以上代码的结果，想想看为什么布局会变成这样

That’s it!