如何在CSS中实现Grid多行多列布局_Grid template-rows template-columns实践案例

使用CSS Grid布局可通过grid-template-columns和grid-template-rows定义行列结构。1. 设置display: grid启用网格；2. 用fr单位实现比例分配，如1fr:2fr:1fr创建三列布局；3. 定义多行高度适用于头部、主体、底部结构，侧边栏可跨行显示；4. repeat(3, 1fr)简化等分布局，支持混合写法；5. 结合gap、网格线编号提升灵活性，轻松构建响应式页面。

使用CSS Grid布局可以轻松实现多行多列的页面结构。通过grid-template-rows和grid-template-columns属性，你可以精确控制网格中每一行和每一列的尺寸与数量。下面结合实际案例说明如何使用这两个属性构建灵活的布局。

基本Grid容器设置

要启用Grid布局，先为父容器设置display: grid，然后定义行列结构。

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

上面代码创建了一个3列2行的网格：

• 第一列宽100px，第二列200px，第三列占据剩余空间（1fr）
• 第一行高50px，第二行100px

使用fr单位创建响应式列布局

fr单位表示“可用空间的份数”，适合创建等分或比例列。

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

.grid-layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 中间列是两侧的两倍宽 */
  grid-gap: 10px;
}

这种布局常用于内容区：左侧导航、中间主内容、右侧边栏。随着容器宽度变化，各列自动按比例伸缩。

定义多行高度并放置元素

除了列，你也可以明确控制每行的高度，尤其适用于固定头部或底部的布局。

Melodio

Melodio是全球首款个性化AI流媒体音乐平台，能够根据用户场景或心情生成定制化音乐。

110

查看详情

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 50px;
  height: 100vh;
}
.header { grid-row: 1; }
.sidebar { grid-row: 1 / 4; } /* 跨越三行 */
.main-content { grid-row: 2; }
.footer { grid-row: 3; }

这个例子构建了一个典型的后台布局：

• 两列：侧边栏200px，主内容占剩余宽度
• 三行：头部60px，主体自适应，底部50px
• 侧边栏通过grid-row: 1 / 4从第1行延伸到第4行前（即跨3行）

结合repeat()函数简化重复定义

当有多组相同宽度的列或高度的行时，repeat()函数能大幅简化代码。

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
  gap: 10px;
}

这会生成一个3列2行的相册布局，每列等宽，每行高150px。如果希望某些列不同，还可以混合使用：

grid-template-columns: 50px repeat(3, 1fr) 50px;

表示左右各50px的边框列，中间3列平分剩余空间。

基本上就这些。掌握grid-template-rows和grid-template-columns后，配合fr、repeat()和网格线编号，就能高效构建复杂且响应式的多行多列布局。不复杂但容易忽略的是单位选择和范围跨越的写法，多练几次就能熟练运用。

以上就是如何在CSS中实现Grid多行多列布局_Grid template-rows template-columns实践案例的详细内容，更多请关注php中文网其它相关文章！