grid-template-columns: 20px 1fr解释
时间: 2025-05-25 17:07:18 浏览: 22
### CSS Grid 中 `grid-template-columns: 20px 1fr` 的具体含义
在 CSS Grid 布局中,`grid-template-columns` 是用来定义网格容器内部列宽的一个重要属性。当设置为 `20px 1fr` 时,表示该网格将由两列组成,其中第一列的宽度固定为 `20px`,而第二列则会占用剩余的所有可用空间[^1]。
- **`20px`**: 这是一个绝对长度单位,意味着这一列会被严格限制为 `20px` 宽度。
- **`1fr`**: 单位 `fr`(fraction)代表的是分片比例单元,在这里它表示当前列将会分配到整个网格容器除去其他已知尺寸后的剩余空间的一部分。由于这里是唯一带有 `fr` 的部分,因此这列实际上占据了所有的剩余空间[^1]。
#### 使用 CSS Grid 创建左侧固定宽度、右侧自适应的双列布局
为了创建这样一个简单的双列布局,可以采用如下 HTML 和 CSS 结构:
```html
<div class="grid-container">
<div class="fixed-col">Fixed Column</div>
<div class="flexible-col">Flexible Column</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: 20px 1fr; /* 设定左列固定右列弹性 */
}
.fixed-col {
background-color: lightgray; /* 背景颜色仅作区分用途 */
text-align: center;
}
.flexible-col {
background-color: lightskyblue; /* 不同背景色便于观察效果 */
}
</style>
```
在这个例子中:
- `.grid-container`: 此类名应用于外部包裹层,设置了其显示模式为 `grid` 并指定了每列的大小。
- `.fixed-col`, `.flexible-col`: 分别对应于固定的左边栏和灵活调整右边栏的不同样式处理[^3]。
这种配置下,无论窗口或者父级元素大小发生任何变化,`.fixed-col` 总保持 `20px` 的恒定宽度,而 `.flexible-col` 则始终充满余下的全部区域[^1]。
---
###
阅读全文
相关推荐


















