CSS固定列与自适应列组合布局如何实现_通过Grid模板列设置固定与自适应比例

新闻中心 NEWS CENTER

2025-11-21

浏览次数：次

使用CSS Grid布局可通过grid-template-columns属性实现固定与自适应列组合，如“200px 1fr”创建左固定右自适应两列；“200px 1fr 100px”实现三栏布局；“240px 2fr 1fr”使多自适应列按比例分配；结合媒体查询可在小屏下变为单列，提升响应式体验。

css固定列与自适应列组合布局如何实现_通过grid模板列设置固定与自适应比例

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

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

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

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

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

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

示例：左栏 200px，中间自适应，右栏 100px

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

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

Waifulabs

一键生成动漫二次元头像和插图

317 查看详情 Waifulabs

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

示例：左固定 240px，右两列 2:1 分配剩余空间

.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 单位，能快速构建稳定且响应式的固定+自适应布局，无需计算百分比或使用浮动等过时方法。

以上就是CSS固定列与自适应列组合布局如何实现_通过Grid模板列设置固定与自适应比例的详细内容，更多请关注其它相关文章！