最简洁方式是grid-template-columns: 200px 1fr；左侧固定200px，右侧占剩余空间，需为右侧项设min-width: 0防止溢出，响应式可配合@media调整。
用 Grid 实现左侧固定、右侧自适应，最简洁的方式就是定义两列：第一列 200px（固定宽），第二列 1fr（占满剩余空间）。
在容器上设置 display: grid，并通过 grid-template-columns 指定列宽：
grid-template-columns: 200px 1fr; —— 左侧严格 200px，右侧自动伸缩填满剩余宽度1fr 不是百分比，而是“剩余可用空间的 1 等份”，即使窗口变窄，它也会动态收缩（最小可到内容宽度）右侧区域如果放长文本、表格或内联元素，可能因无断点而横向溢出。建议加一行保护：
.right）设置 min-width: 0; —— 这能激活 fr 轨道的最小尺寸计算，允许内容正常换行word-break: break-word; 或 overflow-wrap: break-word;
实际项目中常需要一点灵活性：
grid-template-columns: 200px minmax(300px, 1fr);
gap: 12px;（同时作用于行列），别用 margin，Grid 间隙更可控@media 改为 grid-template-columns: 1fr;，并用 display: none 隐藏左区基本上就这些。200px + 1fr 是 Grid 中最轻量、最可靠的左右布局模式之一，不复杂但容易忽略 min-width: 0 这个关键细节。
以上就是Grid网格布局如何实现左侧固定右侧自适应_使用200px 1fr布局结构的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
674
收藏
