7.1 属性 justify-items
CSS Grid Layout 为管理网格内元素的对齐提供了有效工具。属性
justify-items, align-items 和 place-items 能让你精确设置grid元素在单元格内横向和纵向的排列方式。我们来详细看看这些属性。
属性 justify-items 定义了所有 grid 元素在其单元格内的横向对齐。
语法:
.grid-container {
justify-items: value;
}
其中:
-
value: 确定元素横向对齐的值。可选值:start: 将元素对齐到单元格的开始end: 将元素对齐到单元格的结束center: 将元素在单元格中居中stretch(默认): 拉伸元素以填满单元格的完整宽度
示例 1: 对齐到单元格的开始
在此示例中，所有元素将被对齐到其单元格的左边缘:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: start; /* 所有元素都对齐到单元格的开始 */
}
示例 2: 居中元素
在此示例中，所有元素将被居中在其单元格内:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center; /* 所有元素在单元格内居中 */
}
7.2 属性 align-items
属性 align-items 定义了所有 grid 元素在其单元格内的纵向对齐。
语法:
.grid-container {
align-items: value;
}
其中:
-
value: 确定元素纵向对齐的值。可选值:start: 将元素对齐到单元格的开始end: 将元素对齐到单元格的结束center: 将元素在单元格内垂直居中stretch(默认): 拉伸元素以填满单元格的完整高度
示例 1: 对齐到单元格的开始
在此示例中，所有元素将被对齐到其单元格的上边缘:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
align-items: start; /* 所有元素都对齐到单元格的顶部 */
}
示例 2: 垂直居中元素
在此示例中，所有元素将被垂直居中在其单元格内:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
align-items: center; /* 所有元素在单元格内垂直居中 */
}
7.3 属性 place-items
属性 place-items 是同时为 align-items 和 justify-items 设置值的简写。
语法:
.grid-container {
place-items: align-value justify-value;
}
其中:
align-value: 单元格内的纵向对齐值 (align-items)justify-value: 单元格内的横向对齐值 (justify-items)
如果为属性 place-items 指定一个值，例如 place-items: stretch, 元素将在两个方向上对齐。
示例 1: 垂直和水平居中元素
在此示例中，所有元素将在其单元格内水平和垂直居中:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
place-items: center; /* 元素在水平和垂直方向上居中 */
}
示例 2: 元素高度拉伸并对齐到左上角
在此示例中，所有元素都将在高度上被拉伸，并对齐到其单元格的左上角:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
place-items: stretch start; /* 元素在高度上被拉伸并对齐到左上角 */
}
7.4 完整实现示例
完整实现示例:
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三个等宽列 */
grid-template-rows: repeat(3, 100px); /* 三个固定高度行 */
gap: 10px;
place-items: 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>CSS 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-items在水平和垂直方向上居中元素 -
.grid-item: 定义网格元素的基本样式，如背景色、文字颜色、内边距、文字居中和边框
GO TO FULL VERSION