css grid-template-rows与columns结合应用技巧-css教程-PHP中文网

css grid-template-rows与columns结合应用技巧

P粉602998670

发布： 2025-09-29 11:03:02

原创

400人浏览过

答案：grid-template-rows和columns定义网格行列结构，配合fr、px、minmax等单位实现响应式布局，并通过grid-area或行列定位分配元素区域。

css grid-template-rows与columns结合应用技巧

在使用 CSS Grid 布局时，grid-template-rows 和 grid-template-columns 是定义网格结构的核心属性。它们分别控制行高和列宽，合理搭配能实现灵活、响应式的布局。

明确网格结构设计思路

在编写 grid-template-rows 与 columns 前，先规划好页面的分区。比如常见的“头部 + 内容区 + 侧边栏 + 底部”布局，可以按以下方式划分：

用 grid-template-rows 定义垂直方向的区块高度（如 header 占固定高度，main 区自适应）
用 grid-template-columns 设置水平方向的列宽（如 sidebar 固定宽度，content 区弹性伸缩）

示例：

.grid-container {
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 250px 1fr;
}

灵活使用单位搭配

合理组合不同单位能让布局更具适应性：

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

MarsX

AI驱动快速构建App，低代码无代码开发，改变软件开发的游戏规则

159

查看详情

fr：表示可用空间的份数，适合主内容区域
px / rem：用于固定尺寸区域（如导航栏、侧边栏）
minmax()：设置最小最大范围，增强响应性
auto：根据内容自动调整大小

例如让中间列至少 300px，但可随窗口变大：

grid-template-columns: 200px minmax(300px, 1fr);
grid-template-rows: auto 1fr auto;

配合 grid-area 精准定位元素

当行列结构定义完成后，可通过 grid-row 和 grid-column 或简写 grid-area 将子元素放入指定区域。

示例：将 aside 放在右侧第一行

aside {
grid-column: 2;
grid-row: 1;
}

或使用命名区域更直观：

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

header { grid-area: header; }
sidebar { grid-area: sidebar; } 基本上就这些。掌握行列定义的逻辑和单位搭配，再结合命名区域或坐标定位，就能高效构建复杂且响应式的页面结构。

以上就是css grid-template-rows与columns结合应用技巧的详细内容，更多请关注php中文网其它相关文章！