首页 > 文章 > 前端

CSSGrid布局入门教程

时间：2026-01-05 19:03:41 151浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《CSS Grid布局后台页面简单教程》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

CSS Grid可高效构建后台页面布局：通过grid-template-areas划分header、nav、main、footer区域，配合响应式媒体查询适配移动端，辅以gap、min-height等技巧提升实用性与可维护性。

css简单后台页面如何布局_使用grid划分页面区域

用 CSS Grid 布局一个简洁的后台页面，核心是把页面按功能区域逻辑切分：顶部导航栏、左侧菜单栏、主内容区、可能还有底部状态栏。Grid 适合这种固定结构 + 弹性伸缩的场景，代码清晰、维护方便。

定义整体容器为 grid

给最外层容器（比如或一个

）设置 display: grid，并用 grid-template-areas 直观声明区域名称：

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   main"
    "footer footer footer";
  grid-template-rows: 60px 1fr 40px;
  grid-template-columns: 220px 1fr 300px; /* 可按需调整 */
  height: 100vh;
  margin: 0;
}

这里划分了三行四列（实际三列），其中 header 占满第一行，nav 固宽左置，main 自适应居中扩展，右侧预留了可选的侧边栏（如通知、快捷操作）。

给子元素分配对应区域

每个区块通过 grid-area 对应上一步定义的名称：

→ .header { grid-area: header; }
→ .nav { grid-area: nav; }
→ .main { grid-area: main; overflow-y: auto; }（加滚动避免内容溢出）
→ .footer { grid-area: footer; }

适配小屏：用媒体查询切换布局

移动端不需要侧边栏或希望导航收起时，可改用单列流式布局：

@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
    grid-template-rows: 60px 60px 1fr 40px;
    grid-template-columns: 1fr;
  }
  .nav { position: sticky; top: 60px; } /* 导航固定在 header 下 */
}

增强实用性的小技巧

主内容区用 min-height: 0 防止内部 flex/grid 子项高度失控
菜单栏加 overflow-y: auto，确保长菜单可滚动
用 gap 替代 margin 控制区域间距，更统一（如 gap: 1px 做分割线效果）
标题栏右侧放用户头像等，可用 justify-content: space-between 快速对齐

不复杂但容易忽略：Grid 是布局工具，不是样式工具。区域划分清楚后，各区块内部仍可用 Flex 或普通流式排版，分工明确才好维护。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

前往漫画官网入口并下载 ➜