display: grid;如何设置一行几个
时间: 2025-06-04 10:23:27 浏览: 19
### 如何使用 CSS Grid 布局设置每行显示几个项目
CSS Grid 布局提供了一种强大的方式来控制页面布局,其中 `grid-template-columns` 和 `grid-template-rows` 属性是定义网格结构的核心工具。为了设置每行显示的项目数量,可以通过指定列宽来实现[^2]。
#### 使用固定宽度的列
如果希望每行显示固定数量的项目,可以为 `grid-template-columns` 设置固定的列宽。例如,若希望每行显示 3 个项目,则可以定义 3 列,每列宽度相等:
```css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 每行显示 3 个项目 */
gap: 10px; /* 设置项目之间的间距 */
}
```
此处,`repeat(3, 1fr)` 表示创建 3 列,每列的宽度为 `1fr`(即容器总宽度的三分之一)。通过这种方式,可以确保每行显示 3 个项目[^2]。
#### 使用自动填充功能
当项目的数量不确定时,可以使用 `repeat` 函数的 `auto-fill` 或 `auto-fit` 关键字,动态调整每行的项目数量。例如:
```css
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 动态调整列数 */
gap: 10px;
}
```
在此例中,`minmax(100px, 1fr)` 定义了每列的最小宽度为 `100px`,最大宽度为 `1fr`。`auto-fill` 会根据容器宽度自动填充尽可能多的列,而 `auto-fit` 会在必要时合并剩余空间[^4]。
#### 结合媒体查询实现响应式布局
为了适应不同屏幕尺寸,可以结合媒体查询调整每行显示的项目数量。例如:
```css
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 默认每行 2 个项目 */
gap: 10px;
}
@media (min-width: 768px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* 在中等屏幕上每行 3 个项目 */
}
}
@media (min-width: 1024px) {
.grid-container {
grid-template-columns: repeat(4, 1fr); /* 在大屏幕上每行 4 个项目 */
}
}
```
通过上述方法,可以根据屏幕宽度动态调整每行的项目数量[^4]。
#### 示例代码
以下是一个完整的 HTML 和 CSS 示例,展示如何设置每行显示 3 个项目:
```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 Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 每行显示 3 个项目 */
gap: 10px;
}
.grid-item {
background-color: skyblue;
padding: 20px;
text-align: center;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
```
此示例中,`.grid-container` 的 `grid-template-columns` 被设置为 `repeat(3, 1fr)`,从而确保每行显示 3 个项目[^2]。
阅读全文
相关推荐


















