CSS 网格容器

1

2

3

4

5

6

7

8

亲自试一试 »

网格容器

要使 HTML 元素充当网格容器，您必须设置display属性为 grid或者inline-grid。

网格容器由放置在列和行内的网格项组成。

grid-template-columns 属性

这个grid-template-columns属性定义网格布局中的列数，并且可以定义每列的宽度。

该值是一个空格分隔的列表，其中每个值定义相应列的宽度。

如果您希望网格布局包含 4 列，请指定 4 列的宽度，或者"auto"（如果所有列应具有相同的宽度）。

示例

制作一个包含 4 列的网格：

.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}

亲自试一试 »

笔记：如果 4 列网格中有超过 4 个项目，网格将自动添加一个新行来放置这些项目。

这个grid-template-columns属性还可用于指定列的大小（宽度）。

示例

设置 4 列的大小：

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

亲自试一试 »

grid-template-rows 属性

这个grid-template-rows属性定义每行的高度。

1

2

3

4

5

6

7

8

该值是一个空格分隔的列表，其中每个值定义相应行的高度：

示例

.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}

亲自试一试 »

justify-content 属性

这个justify-content属性用于对齐容器内的整个网格。

1

2

3

4

5

6

笔记：网格的总宽度必须小于容器的宽度justify-content属性产生任何影响。

示例

.grid-container {
display: grid;
justify-content: space-evenly;
}

亲自试一试 »

示例

.grid-container {
display: grid;
justify-content: space-around;
}

亲自试一试 »

示例

.grid-container {
display: grid;
justify-content: space-between;
}

亲自试一试 »

示例

.grid-container {
display: grid;
justify-content: center;
}

亲自试一试 »

示例

.grid-container {
display: grid;
justify-content: start;
}

亲自试一试 »

示例

.grid-container {
display: grid;
justify-content: end;
}

亲自试一试 »

对齐内容属性

这个align-content属性被用来垂直对齐容器内的整个网格。

1

2

3

4

5

6

笔记：网格的总高度必须小于容器的高度align-content属性产生任何影响。

示例

.grid-container {
display: grid;
height: 400px;
align-content: center;
}

亲自试一试 »

示例

.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}

亲自试一试 »

示例

.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}

亲自试一试 »

示例

.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}

亲自试一试 »

示例

.grid-container {
display: grid;
height: 400px;
align-content: start;
}

亲自试一试 »

示例

.grid-container {
display: grid;
height: 400px;
align-content: end;
}

亲自试一试 »