css中的容器,CSS 网格容器

align-content 属性

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

1

2

3

4

5

6

7

8

注意：网格的总高度必须小于容器的高度，这样 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;

}