搜索

css中Grid- Template-Columns如何使用？

html5 css

网友回复

在 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. 重...

点击查看剩余70%

我知道答案，我要回答

我有问题

私活外包