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;
}