如何使用CSS Grid实现带侧边栏的响应式管理后台界面？-css教程-PHP中文网

应使用 grid-template-areas 显式划分侧边栏与主内容区，侧边栏设固定宽度（如 240px）、主区域用 1fr，主内容区内嵌 grid 并用 repeat(auto-fill, minmax(280px, 1fr))) 控制卡片列数，小屏时通过 @media 配合 display: none 隐藏侧边栏，避免宽度失控和卡片变形。

如何使用css grid实现带侧边栏的响应式管理后台界面？

直接用 grid-template-areas 划分整体结构，再用 grid-template-columns 配合 minmax() 控制主内容列数，侧边栏必须脱离 auto-fill 计算——否则小屏下卡片会被拉宽变形、侧边栏宽度失控。

侧边栏不能塞进 repeat(auto-fill, …) 里

常见错误是把整个布局写成 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)))，然后指望侧边栏也参与列数计算。结果是：小屏时侧边栏被强行压到 280px 宽，文字换行、图标错位；主内容区列数却没变，卡片挤成窄条。

侧边栏要显式声明区域：grid-area: sidebar，主内容区用 grid-area: main
容器的 grid-template-areas 写死结构，例如 "sidebar main" "sidebar footer"
grid-template-columns 只管侧边栏宽度和主区域比例，比如 240px 1fr 或 minmax(200px, 250px) 1fr，不掺和 auto-fill
主内容区内部再套一层 Grid，才用 repeat(auto-fill, minmax(280px, 1fr))) 管卡片列数

@media 中只改 grid-template-columns 和 grid-area，别漏掉 display

小屏下光写 @media (max-width: 767px) { grid-template-columns: 1fr; } 不够——侧边栏 DOM 还在网格里占位，可能被挤进第一列，撑高容器或遮挡内容。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须同步设 .sidebar { grid-column: 1; display: none; }（display: none 是关键，不是 visibility: hidden）
如果侧边栏需要抽屉式滑出，就别用 display: none，改用 transform: translateX(-100%) + position: fixed，并确保 z-index 足够高
检查 DevTools 的 “Computed” 面板，确认生效的 grid-template-columns 真的是 1fr，而不是被更具体的选择器覆盖了

主内容区卡片列数用 auto-fill，但最小宽度得卡死

auto-fill 和 auto-fit 行为不同：auto-fill 会保留空轨道，避免小屏下卡片被拉宽；auto-fit 会合并空轨道，导致列数骤减、布局跳变。对仪表盘卡片来说，auto-fill 更稳。

写法是：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)));
280px 是底线——再小，中文两行就难读；再大，768px 屏上只剩一列
必须加 gap（比如 gap: 1rem），否则卡片紧贴，视觉混乱
卡片子元素别设 width，否则破坏 Grid 自动分配逻辑；靠 min-width 和 max-width 控制弹性边界即可

IE11 或旧 Safari 下 fr 单位失效，降级要早做准备

IE11 完全不认 1fr，整条 grid-template-columns 规则会被忽略，退化成单列；iOS 13 以下 Safari 对 minmax() 支持也不稳定。

兼容方案优先用 Flexbox 降级：@supports not (display: grid) { .container { display: flex; } }
不要等用户报错才补，一开始就写 @supports (display: grid) 包住 Grid 样式，外面留一层 Flex 基础布局
若必须支持 iOS 13 以下，侧边栏宽度改用 fit-content(240px) 替代 minmax(200px, 250px)，主内容用 flex: 1
所有 Grid 容器加 min-height: 100vh，别只写 height: 100vh，否则长页面滚动时侧边栏截断