8.1 属性justify-content
CSS Grid Layout为管理整个网格容器在可用空间中的对齐提供了强大的工具。属性justify-content、align-content和place-content允许控制容器内行和列的对齐，为布局创建提供了灵活性和精确性。
属性justify-content管理整个网格在容器内的水平对齐。当容器的大小比网格本身所需的宽度大时，这个属性很有用。
语法：
.grid-container {
display: grid;
justify-content: value;
}
其中: value可以接受以下值：
start: 将网格对齐到容器的起始位置end: 将网格对齐到容器的结束位置center: 将网格在容器内居中对齐stretch: 拉伸网格以填满整个容器space-around: 在每个元素周围放置均等的空间space-between: 在元素之间放置均等的空间space-evenly: 在元素与容器边缘之间放置均等的空间
示例 1: 在容器起始对齐
在这个示例中，所有内容将对齐到容器的左边缘：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: start; /* 将内容对齐到容器的左边缘 */
}
示例 2: 内容居中
在这个示例中，所有内容将在容器内居中：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: center; /* 在容器内居中内容 */
}
8.2 属性align-content
属性align-content定义了网格内容在网格容器内垂直轴上的对齐方式。当网格未填满所有可用垂直空间时，它很有用。
语法：
.grid-container {
align-content: value;
}
其中: value是定义内容垂直对齐的值。可能的值：
start: 将内容对齐到容器的起始位置end: 将内容对齐到容器的结束位置center: 将内容在容器内居中对齐space-between: 在元素之间放置均等的空间space-around: 在每个元素周围放置均等的空间space-evenly: 在元素与容器边缘之间放置均等的空间stretch(默认): 拉伸内容以填满所有可用空间
示例 1: 在容器起始对齐
在这个示例中，所有内容将对齐到容器的上边缘：
CSS
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
align-content: start; /* 将内容对齐到容器的上边缘 */
}
示例 2: 内容居中
在这个示例中，所有内容将在容器内居中：
CSS
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
align-content: center; /* 在容器内居中内容 */
}
8.3 属性place-content
属性place-content是同时为justify-content和align-content设置值的缩写。
语法：
.grid-container {
place-content: justify-value align-value;
}
其中：
justify-value: 水平对齐(justify-content)的值align-value: 垂直对齐(align-content)的值
示例 1: 内容在水平和垂直方向居中
在这个示例中，所有内容将在容器内水平和垂直居中：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
place-content: center center; /* 在水平和垂直方向居中内容 */
}
示例 2: 内容按宽度拉伸并对齐到上边缘
在这个示例中，内容将按容器的宽度拉伸并对齐到上边缘：
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
place-content: stretch start; /* 按宽度拉伸内容并对齐到上边缘 */
}
8.4 完整实现示例
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px); /* 三列固定宽度 */
grid-template-rows: repeat(3, 100px); /* 三行固定高度 */
gap: 10px;
place-content: center center; /* 在水平和垂直方向居中内容 */
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid容器对齐示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">元素 1</div>
<div class="grid-item item2">元素 2</div>
<div class="grid-item item3">元素 3</div>
<div class="grid-item item4">元素 4</div>
<div class="grid-item item5">元素 5</div>
<div class="grid-item item6">元素 6</div>
</div>
</body>
</html>
代码解释：
-
.grid-container: 创建一个具有三列固定宽度和三行固定高度的Grid容器。使用属性place-content在水平和垂直方向居中内容 -
.grid-item: 定义网格元素的基本样式，如背景色、文本颜色、内边距、文本居中和边框
GO TO FULL VERSION