CSSGrid固定列与自适应列设置技巧

本文深入讲解了如何利用CSS Grid的`grid-template-columns`属性，通过混合使用像素值（如200px）与`fr`单位（如1fr、2fr），高效实现固定列与自适应列的灵活组合布局——无论是两栏（左固定右伸缩）、三栏（两侧固定中间自适应），还是多自适应列按比例分配，都能简洁精准地完成；更结合媒体查询实现移动端单列堆叠，让响应式设计变得直观、可靠且无需依赖浮动或复杂计算，是现代网页布局的首选实践方案。

要实现CSS中固定列与自适应列的组合布局，使用 Grid 布局（CSS Grid） 是最简洁高效的方式。通过 grid-template-columns 属性，可以轻松定义某些列为固定宽度（如 200px），其他列自动填充剩余空间。

基本思路：使用 fr 单位与固定单位混合

Grid 提供了 fr（fraction）单位，表示“可用空间的份数”。将固定列设为像素值（如 200px），自适应列用 1fr 或多个 fr 比例，即可实现灵活布局。

示例：左侧固定 200px，右侧占满剩余空间

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  height: 100vh;
}

此时容器分为两列：第一列固定 200px 宽，第二列自动伸缩，占据剩余宽度。

多列混合布局：固定 + 自适应 + 固定

常见于三栏布局，如侧边栏 + 主内容 + 右侧工具栏。

.container {
  display: grid;
  grid-template-columns: 200px 1fr 100px;
  gap: 12px;
  height: 100vh;
}

中间列会随窗口变化自动调整宽度，两侧保持固定。

多个自适应列按比例分配

如果需要多个弹性列，可以用多个 fr 值设置比例。

.container {
  display: grid;
  grid-template-columns: 240px 2fr 1fr;
  gap: 20px;
}

右侧两列将按 2:1 的比例共享除 240px 外的所有水平空间。

响应式中的灵活应用

结合媒体查询，可在不同屏幕下调整列行为。

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* 小屏下变为单列 */
  }
}

在移动设备上堆叠显示，提升可读性。

基本上就这些。利用 grid-template-columns 混合使用像素值和 fr 单位，能快速构建稳定且响应式的固定+自适应布局，无需计算百分比或使用浮动等过时方法。

本篇关于《CSSGrid固定列与自适应列设置技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！