在 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)控制间距。通过灵活组合这些值,可以轻松实现复杂的响应式网格布局!
网友回复
python如何实现torrent的服务端进行文件分发p2p下载?
如何在浏览器中录制摄像头和麦克风数据为mp4视频保存下载本地?
go如何编写一个类似docker的linux的虚拟容器?
python如何写一个bittorrent的种子下载客户端?
ai能通过看一个网页的交互过程视频自主模仿复制网页编写代码吗?
ai先写功能代码通过chrome mcp来进行测试功能最后ai美化页面这个流程能行吗?
vue在手机端上下拖拽元素的时候如何禁止父元素及body的滚动导致无法拖拽完成?
使用tailwindcss如何去掉响应式自适应?
有没有直接在浏览器中运行的离线linux系统?
nginx如何保留post或get数据进行url重定向?