note

Appearance

grid ​

原文：阮一峰 CSS Grid 网格布局教程

网格布局（Grid）是最强大的 CSS 布局方案。

Flex 布局是轴线布局。

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格。

基本概念 ​

container（容器）：采用网格布局的区域。即 display:grid 的元素

item（项目）：容器内采用网格定位的子元素。 即 子元素

row：容器内面的水平区域。

column：容器内垂直区域称。

cell（单元格）：行 和 列 的交叉区域。

grid line（网格线）：划分网格的线，如图：

display ​

块级元素

1
2
3
4
5
6
7
8
9
与 行内元素

display: grid | inline-grid

注意

使用 grid 以后，子元素（项目）的 float、display: inline-block、display: table-cell、vertical-align 和 column-*等设置都将失效。

columns 与 rows 的设置 ​

1
2
3
4
5
6
7
8
9

width: 100%;

grid-template-columns：

grid-template-rows：

这两个参数会将 grid 变为 网格

可是使用准确的值，如：100px

可以使用百分比，如：33%

可是使用 repeat() 进行重复，如 repeat(3,33%) 和 repeat(3,100px)

repeat() 的第二个参数也可以是多个，如 100px 50px 100px

auto-fill 关键字表示自动填充，如 repeat(auto-fill, 100px)，此时一行会以 100px 尽可能的塞下足够多的元素。

auto-fit 与 auto-fill 几乎一致，只有在单元格宽度不固定的时候，才会有行为差异。

  • auto-fill 会用空格子填满剩余宽度
  • auto-fit 则会尽量扩大单元格的宽度。 如 repeat(auto-fit, 100px)

ps 其实差距并不明显

fr 关键字 是 fraction 的缩写，意为"片段"。fr 使用的是剩余空间

  • 例 1：grid-template-columns: 1fr 1fr;
  • 例 2：grid-template-columns: 50px 1fr 2fr;

minmax() 表示范围，在 Min ~ Max 之间 如：1fr 1fr minmax(100px, 1fr);

auto 关键字 表示 浏览器自己决定长度，如 如：auto 100px auto;

网格线的名称：使用方括号，指定每一根网格线的名字，如

css
.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

gap（网格线） ​

css
grid-gap: <grid-row-gap> <grid-column-gap>;

grid-gap 是 grid-row-gap 和 grid-column-gap 的简写。

1
2
3
4
5
6
7
8
9

grid-row-gap： 0px

grid-column-gap： 0px

提示

根据最新标准，上面三个属性名的 grid-前缀已经删除，grid-column-gap 和 grid-row-gap 写成 column-gap 和 row-gap，grid-gap 写成 gap。

区域命名 ​

grid-template-areas 属性用于定义区域。

css
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}

如果不会用到该区域，则可以使用 .

css
.container {
  grid-template-areas:
    "a . c"
    "d . f"
    "g . i";
}

注意

区域的命名会影响到网格线。

每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

比如，区域名为 header

  • 起始位置的水平网格线和垂直网格线叫做 header-start，
  • 终止位置的水平网格线和垂直网格线叫做 header-end。

放置顺序（横竖） ​

grid-auto-flow: row | column | row dense | column dense

1
2
3
4
5
6
7
8
9

dense 主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

items/位置（居中） ​

place-items: <align-items> <justify-items>;

justify-items 设置单元格内容的 水平位置（左中右）， align-items 设置单元格内容的 垂直位置（上中下）

1
2
3
4
5
6
7
8
9

justify-items start end center stretch

align-items start end center stretch

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

content/位置（居中） ​

place-content: <align-content> <justify-content>
1
2
3
4
5
6
7
8
9

justify-content start end center stretchspace-aroundspace-betweenspace-evenly

align-content start end center stretch space-aroundspace-betweenspace-evenly

这个属性需要长宽有容量，如width:100%

多余网格的宽和高 ​

grid-auto-columns 和 grid-auto-rows 用来设置多余网格的列宽和行高。

css
grid-template-columns: 100px 100px;
grid-template-rows: 100px;
1
2
3
4
5
6
7
8
9

grid-auto-flow: row | column | row dense | column dense

grid-auto-rows

grid-auto-columns

简写 ​

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 这六个属性的合并简写形式。

从易读易写的角度考虑，建议不要合并属性。

item 的位置 ​

grid-column-start ：左边框所在的垂直网格线
grid-column-end ：右边框所在的垂直网格线
grid-row-start ：上边框所在的水平网格线
grid-row-end ：下边框所在的水平网格线

1
2
3
4
5
6
7
8
9

grid-column-start:
grid-column-end:
grid-row-start:
grid-row-end:

参数都是边框，这里输入 number。

grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式，
grid-row 属性是 grid-row-start 属性和 grid-row-end 的合并简写形式。

grid-column 和 grid-row 可以使用 span 关键字。

1
2
3
4
5
6
7
8
9

grid-column
grid-row

span 关键字，表示跨越多少个网格。

grid-area ​

grid-area 有两个用处，

1 是作为 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的合并简写

css
.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

2 是指定存放区域

css
.container {
  grid-template-areas:
    "a b c"
    "d e f"
    "g h i";
}
.item-1 {
  grid-area: e;
}

item 的位置（居中） ​

place-self 属性是 align-self 属性和 justify-self 属性的合并简写形式。

align-self 单元格内容的垂直位置（上中下）

justify-self 单元格内容的水平位置（左中右）

1
2
3
4
5
6
7
8
9

align-self start end center stretch

justify-self start end center stretch