在css中如何用grid-template实现整体布局-css教程-PHP中文网

在css中如何用grid-template实现整体布局

P粉602998670

发布： 2025-10-09 08:47:01

原创

526人浏览过

使用 grid-template 可同时定义行、列与区域，通过 grid-template-areas 直观规划布局结构，结合 fr、px 等单位灵活分配空间，并利用媒体查询实现响应式设计，适用于构建清晰易维护的复杂页面布局。

在css中如何用grid-template实现整体布局

使用 grid-template 可以高效地定义 CSS Grid 布局的整体结构。它是一个简写属性，用于同时设置网格的行、列和区域布局。通过 grid-template-areas、grid-template-rows 和 grid-template-columns，你可以直观地规划页面骨架。

使用 grid-template 定义整体布局

grid-template 是 grid-template-rows、grid-template-columns 和 grid-template-areas 的简写形式，语法如下：

grid-template: <row> / <column>;

或者包含区域命名：

grid-template: "header header" 80px "sidebar main" 1fr / 200px 1fr;

用 grid-template-areas 可视化布局

通过为网格区域命名，可以用字符串直观描述页面结构。适合构建常见的整体布局，如头部、侧边栏、主内容区等。

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

示例：实现一个带头部、侧边栏和主内容的布局

Tellers AI

Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。

查看详情

.container { display: grid; grid-template-areas: "header header" "sidebar main"; grid-template-rows: 80px 1fr; grid-template-columns: 200px 1fr; height: 100vh; } .header { grid-area: header; background: #333; } .sidebar { grid-area: sidebar; background: #f0f0f0; } .main { grid-area: main; padding: 20px; }

灵活设置行列尺寸

在定义列和行时，可以混合使用像素、百分比、fr 单位来控制弹性空间。

1fr 表示一份可伸缩的空间
min-content 或 max-content 可根据内容自动调整
使用 repeat() 简化重复结构，如 repeat(3, 1fr)

例如：

grid-template-columns: 250px 1fr 200px; grid-template-rows: 60px minmax(100px, 1fr);

响应式布局建议

结合媒体查询和 grid-template，可以轻松适配不同屏幕。

在小屏幕上改为单列：

@media (max-width: 768px) { .container { grid-template-areas: "header" "sidebar" "main"; grid-template-rows: 60px auto 1fr; grid-template-columns: 1fr; } }

基本上就这些。合理使用 grid-template 能让整体布局清晰、易维护，特别适合复杂页面结构。关键是先规划好区域划分，再配合灵活的尺寸单位。不复杂但容易忽略细节，比如区域名称必须对齐、每个单元格只能属于一个区域等。

以上就是在css中如何用grid-template实现整体布局的详细内容，更多请关注php中文网其它相关文章！