搜索

回答

在 CSS 中，grid-template-columns 是 Grid 布局的核心属性之一，用于定义网格的列数和每列的宽度。以下是详细用法：

基本语法

.container {
  display: grid;
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
}

<track-size>：列宽，可以是长度（如 px、em）、百分比（%）、fr 单位（剩余空间比例），或 auto（自动分配）。<line-name>（可选）：自定义网格线的名称（用 [] 包裹）。常见用法示例1. 固定宽度列

.container {
  grid-template-columns: 100px 200px 150px;
}

创建 3 列，宽度分别为 100px、200px、150px。2. 混合单位

.container {
  grid-template-columns: 20% 1fr 2fr;
}

第 1 列占容器宽度的 20%，剩余空间按 1:2 分配给第 2 和第 3 列。3. 重复列（repeat()）

.container {
  grid-template-columns: repeat(3, 1fr); /* 3 列等宽 */
  /* 或 */
  grid-template-columns: repeat(2, 100px 50px); /* 100px 50px 重复 2 次 */
}

4. 命名网格线

.container {
  grid-template-columns: [start] 1fr [middle] 1fr [end];
}

定义了两列，并为网格线命名为 start、middle、end。5. 响应式布局（结合 minmax()）

.container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

自动适应容器宽度，每列最小 200px，最大 1fr（避免溢出）。关键值说明

fr	剩余空间的比例单位（如 1fr 2fr 表示 1:2 分配）。
auto	根据内容自动调整宽度。
minmax(a, b)	定义宽度范围（如 minmax(100px, 1fr)）。
repeat(n, x)	重复 n 次 x 的列定义（如 repeat(3, 1fr)）。
fit-content()	根据内容调整宽度，但不超过指定值（如 fit-content(300px)）。

实战示例

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* 列间距 */
}
.item {
  background: lightblue;
  padding: 20px;
}

效果：3 列等宽布局，间距 10px。

注意事项需在父容器设置 display: grid 生效。列数由 grid-template-columns 的值数量决定。结合 grid-gap（或 gap）控制间距。

通过灵活组合这些值，可以轻松实现复杂的响应式网格布局！

网友回复

我知道答案，我要回答

我有问题

私活外包