Css3新布局---Grid网格_grid-area

网格布局是css3中新增加的一种布局方式，比flex更加强大。

flex属于一维布局，对于高度不能灵活控制。

grid网格布局是二维布局，通过行和列来分配网页空间。

通过下面这个小游戏可以简单体会到网格布局的强大。

网格布局小游戏

关键概念

1. 容器和项目

与flex布局相同，网格布局也有父元素和子元素，在父元素上设置display：grid就可以启用网格布局，父元素称为容器，子元素称为项目。

2. 轨道

grid布局的轨道分为行和列，可以通过相关属性设置行和列的数量和大小

3. 单元

行轨道和列轨道交叉的区域称为单元，是最小的网格单位

4. 区域

多个网格单元可以合并为一个区域，单个单元也可以叫做一个区域

5. 网格线

行与行之间、列与列之间的交界处叫做网格线，网格布局会自动为网格线编号，行与列分别编号，都从1开始，网格线的数量比单元数量多一

6. 间隔

两个网格之间的横向或纵向间距称为间隔，间隔的数量比单元数少一

7. fr

fr是一个网格布局中的一个单位，表示剩余空间按份数分配

8. span

span+数字可以表示跨越的单元格数量

容器属性

行与列

grid-template-columns设置列数和每列的大小
grid-template-row设置行数和每行的大小

要设置display：grid

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}
1
2
3
4

可以使用fr或百分比做单位

.grid-container {
  display: grid;
  grid-template-columns: 2fr 20% 3fr 40px;
}
1
2
3
4

repeat函数可以生成重复，下面两个等价

.grid-container {
  display: grid;
  grid-template-columns: repeat(2,1fr,20%);
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 20% 1fr 20%;
}
1
2
3
4
5
6
7
8
9

布局对齐

justify-content和align-content两个属性设置盒子的对齐方式。
place-content 属性是上面两个属性的合并，先垂直后水平。

下面的值都可以使用，各自有不用的用途，与flex中的属性取值相同

/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, */

/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* 分配弹性元素方式 */
justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch;       /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;

/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
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
29
30
31
32

.box1 {
  justify-content: space-enenly;
  align-content: space-around;
}
.box2 {
  place-content: space-around space-evenly;
}
1
2
3
4
5
6
7

内容对齐

justify-items属性设置单元格内容的水平位置（左中右）
align-items属性设置单元格内容的垂直位置（上中下）。
place-items属性是align-items属性和justify-items属性的合并简写形式，先垂直后水平。

可以取到下面的值

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）。

.container1 {
  justify-items: end;
  align-items: start;
}

.container2 {
  place-items: start end;
}
1
2
3
4
5
6
7
8

间距

grid-row-gap属性设置行与行的间隔（行间距）
grid-column-gap属性设置列与列的间隔（列间距）
grid-gap是上面两个元素的合并，先行后列

.container1 {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

.container2 {
  grid-gap: 20px 20px;
}
1
2
3
4
5
6
7
8

项目属性

网格合并

grid-column是一个简写，是grid-column-start和grid-column-end的组合。
grid-row是一个简写，是grid-column-start和grid-column-end的组合。
这个属性用来合并网格，grid-column合并列，grid-row合并行

属性值为两个数字，表示网格线的标号，用 / 分割，从第一条开始，到第五条结束。

item1 {
  grid: 1 / 5
}
1
2
3

可以使用span来指定跨越的数量，跨越3列

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

可以用负值表示倒数第一根网格线。从第一根到倒数第一根

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

grid-area可以同时指定合并的行和列
4个值分别为行的开始，列的开始，行的结束，列的结束

从第一行，第二列开始，到第五行，第六列结束。

.item {
  grid-area: 1 / 2 / 5 / 6;
}
1
2
3

grid-area还可以配合父元素的grid-template-areas属性进行合并和布局。
通过grid-area为单元格命名，grid-template-areas来通过命名布局。

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
 
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}
1
2
3
4
5
6
7
8
9
10
11
12

对齐

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
space-self是上面两个属性的简写。

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
1
2
3
4

最后真的强烈推荐玩玩这个小游戏。
网格花园—grid布局小游戏

参考：
CSS Grid 网格布局教程
菜鸟教程
网格花园