CSS-网格布局

发表于   |   分类于

CSS Grid 网格布局教程

简介

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

采用网格布局的区域，称为”容器”（container）。容器内部采用网格定位的子元素，称为”项目”（item）。项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效。Grid 布局的属性分成两类，一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。

容器里面的水平区域称为”行”（row），垂直区域称为”列”（column）。行和列的交叉区域，称为”单元格”（cell）。划分网格的线，称为”网格线”（grid line）。

容器属性

display

display: grid 指定一个容器内部采用网格布局，块级元素
display: inline-grid 指定一个容器内部采用网格布局，行内元素

容器设为网格布局以后，子元素（项目）的 float、display: inline-block、display: table-cell、vertical-align 和 column-* 等设置都将失效。

大小

grid-template-columns 属性设置每一列的列宽
grid-template-rows 属性设置每一行的行高
grid-auto-columns 属性设置浏览器自动创建的多余网格的列宽
grid-auto-rows 属性设置浏览器自动创建的多余网格的行高

有时候，一些项目的指定位置，在现有网格的外部。这时，浏览器会自动生成多余的网格，以便放置项目。如果不指定 grid-auto-columns 和 grid-auto-rows 这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

(1) 绝对单位或百分比

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

(2) repeat()

1
2
3
4
5
.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 100px 20px 80px);
}

(3) fr

表示比例关系，可以与绝对长度的单位结合使用

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

(4) minmax()

表示长度就在这个范围之中

1
2
3
4
.container {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);
}

(5) auto

表示由浏览器自己决定长度

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

(6) auto-fit

限制单元格的最小宽度，如果容器宽度足够就平均分配剩余空间给每个子元素

1
2
3
4
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}

(7) auto-fill

限制单元格的最小宽度，如果容器宽度足够保留剩余空间，不进行分配

1
2
3
4
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}

(8) 网格线名称

使用方括号，指定每一根网格线的名字，同一根线可以有多个名字

1
2
3
4
5
.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4 right-line];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4 bottom-line];
}

间距

grid-column-gap 属性设置列间距
grid-row-gap 属性设置行间距
grid-gap: <grid-row-gap> <grid-column-gap> 合并简写形式

1
2
3
4
5
6
.container {
  display: grid;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-gap: 20px;
}

区域

grid-template-areas 指定”区域”（area），一个区域由单个或多个单元格组成，如果某些区域不需要利用，则使用”点”（.），每个区域的起始网格线，会自动命名为 区域名-start，终止网格线自动命名为 区域名-end

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<style>
.area {
    display: grid;
    width: calc(5 * 60px);
    height: calc(5 * 60px);
    background: white;
    grid-template-rows: repeat(5, 60px);
    grid-template-columns: repeat(5, 60px);
    grid-template-areas: ".  g  g  g  . " "o_ .  .  .  . " "o  .  e  e  . " "o  .  .  .  l " ".  g_ g_ g_ . ";
}
.g {
    grid-area: g;
    background: #ea4335;
}
.o_ {
    grid-area: o_;
    background: #ff9800;
}
.o {
    grid-area: o;
    background: #fbbc05;
}
.g_ {
    grid-area: g_;
    background: #34a853;
}
.l {
    grid-area: l;
    background: #00bcd4;
}
.e {
    grid-area: e;
    background: #4285f4;
}
.x {
    grid-area: x;
    background: #9e9e9e;
}
</style>
<div class="area">
    <div class="g"></div>
    <div class="o_"></div>
    <div class="o"></div>
    <div class="g_"></div>
    <div class="l"></div>
    <div class="e"></div>
</div>

顺序

grid-auto-flow 默认值是 row，即”先行后列”，也可以将它设成 column，表示”先列后行”；row dense 表示”先行后列并且尽可能紧密填满”，column dense 表示”先列后行并且尽量填满空格”

容器对齐

justify-content 属性是整个内容区域在容器里面的水平位置（左中右）
align-content 属性是整个内容区域的垂直位置（上中下）
place-content: <align-content> <justify-content> 合并简写形式

1
2
3
4
.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

项目对齐

justify-items 属性设置单元格内容的水平位置（左中右）
align-items 属性设置单元格内容的垂直位置（上中下）
place-items: <align-items> <justify-items> 合并简写形式

1
2
3
4
.container {
  justify-items: start | end | center | stretch(默认);
  align-items: start | end | center | stretch(默认);
}

合并简写

grid-template 属性是 grid-template-columns、grid-template-rows 和 grid-template-areas 的合并简写形式

grid 属性是 grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 和 grid-auto-flow 的合并简写形式

项目属性

位置

grid-column-start 属性设置项目左边框所在的垂直网格线，值为数字或网格线的名字
grid-column-end 属性设置项目右边框所在的垂直网格线，值为数字或网格线的名字
grid-row-start 属性设置项目上边框所在的水平网格线，值为数字或网格线的名字
grid-row-end 属性设置项目下边框所在的水平网格线，值为数字或网格线的名字

上面四个属性的值可以为数字、网格线的名字，也可以使用 span 关键字，表示”跨越”，即左右边框（上下边框）之间跨越多少个网格。使用这四个属性，如果产生了项目的重叠，则使用 z-index 属性指定项目的重叠顺序。

grid-column: <grid-column-start>/<grid-column-end> 属性是 grid-column-start 和 grid-column-end 的合并简写形式
grid-row: <grid-row-start>/<grid-row-end> 属性是 grid-row-start 和 grid-row-end 的合并简写形式
grid-area 属性指定项目放在哪一个区域，值可为区域名称或 <row-start> / <column-start> / <row-end> / <column-end> 的合并简写形式

对齐

justify-self 属性设置单个单元格内容的水平位置（左中右）
align-self 属性设置单个单元格内容的垂直位置（上中下）
place-self: <align-self> <justify-self> 合并简写形式

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