如何在CSS中定义Grid行列_grid-template-rows grid-template-columns应用

grid-template-rows和grid-template-columns用于定义网格行列的大小与分布。1. grid-template-columns设置列宽，支持fr、px、%、auto及minmax()等单位，可实现等宽列、固定加弹性布局或响应式列。2. grid-template-rows控制行高，用法类似，适用于均分高度、固定头尾加自适应主体等场景。3. 二者结合可创建二维网格，如三列两行布局，配合fr、repeat()、minmax()等提升灵活性。4. 推荐显式定义行列以增强控制，结合auto-fit实现响应式设计。掌握单位选择与响应式细节是关键。

在CSS中使用Grid布局时，grid-template-rows 和 grid-template-columns 是定义网格行和列的核心属性。它们决定了网格容器中轨道（track）的数量、大小和分布。

grid-template-columns：定义列的宽度

该属性用于设置网格容器中每一列的宽度。你可以用固定单位（如px）、相对单位（如fr、%）或自动分配（auto）来定义。

• 等宽三列布局： grid-template-columns: 1fr 1fr 1fr;
• 两列，一列固定200px，另一列占剩余空间： grid-template-columns: 200px 1fr;
• 响应式四列，每列至少100px，多余空间平均分配： grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

grid-template-rows：定义行的高度

这个属性控制网格中每一行的高度。与列类似，可以使用多种单位灵活设置。

• 两行均分高度： grid-template-rows: 1fr 1fr;
• 头部固定80px，主体占满剩余空间： grid-template-rows: 80px 1fr;
• 三行，中间行自适应内容： grid-template-rows: 100px auto 100px;

结合使用行列定义创建二维网格

将这两个属性一起使用，可以构建完整的网格结构。

知海图Chat

知乎与面壁智能合作推出的智能对话助手

157

查看详情

立即学习“前端免费学习笔记（深入）”；

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px;
}

这样就形成了一个总宽分为三部分（中间列是两边的两倍），高为两行（第一行100px，第二行200px）的网格系统。

实用技巧与注意事项

• fr单位 表示“分数”，用于按比例分配可用空间。
• repeat() 函数可简化重复定义，比如 repeat(4, 1fr) 等同于写四次 1fr。
• 未显式定义的行或列会自动创建（隐式网格），但建议明确设置以增强可控性。
• 移动端适配推荐结合 minmax() 与 auto-fit 实现弹性列数。

基本上就这些。掌握 grid-template-rows 和 grid-template-columns 的用法，就能快速搭建出各种复杂的网页布局结构。不复杂但容易忽略的是单位选择和响应式处理细节。

以上就是如何在CSS中定义Grid行列_grid-template-rows grid-template-columns应用的详细内容，更多请关注php中文网其它相关文章！