grid-template-columns: 150px 1fr;
时间: 2025-06-01 14:16:45 浏览: 16
### CSS Grid 布局中 `grid-template-columns` 的具体用法
#### 1. `grid-template-columns` 的定义
`grid-template-columns` 属性用于定义网格容器中列的宽度和数量。它可以接受多种单位和关键字来设置每列的尺寸,包括像素(px)、分数单位(fr)、百分比(%)、自动(auto)以及其他灵活的单位[^4]。
#### 2. `150px 1fr` 的含义
在 `grid-template-columns` 中使用 `150px 1fr` 表示将网格分为两列:
- 第一列的宽度固定为 150 像素。
- 第二列的宽度根据可用空间按比例分配,`1fr` 表示该列占据剩余空间的 1 份。
代码示例如下:
```css
.grid-container {
display: grid;
grid-template-columns: 150px 1fr; /* 第一列为固定宽度,第二列为剩余空间 */
gap: 10px; /* 设置列间距 */
}
```
#### 3. 效果分析
当容器宽度发生变化时:
- 如果容器总宽度为 500 像素,则第一列宽度为 150 像素,第二列宽度为剩余的 350 像素。
- 如果容器宽度缩小到 300 像素,则第一列仍保持 150 像素,第二列宽度变为 150 像素(即剩余空间)。
这种布局方式非常适合需要固定宽度与动态宽度结合的场景[^4]。
#### 4. 其他常见用法
- **固定宽度**:所有列都使用固定单位,如 `grid-template-columns: 150px 200px 100px;`。
- **分数单位(fr)**:根据容器宽度按比例分配空间,如 `grid-template-columns: 1fr 2fr;`。
- **混合使用**:结合固定宽度和比例单位,如 `grid-template-columns: 150px 1fr 2fr;`。
- **重复函数**:简化多列定义,如 `grid-template-columns: repeat(3, 1fr);`[^3]。
#### 5. 示例代码
以下是一个完整的示例,展示 `150px 1fr` 的实际效果:
```html
<style>
.grid-container {
display: grid;
grid-template-columns: 150px 1fr; /* 固定宽度 + 动态宽度 */
gap: 10px;
background-color: #f2f2f2;
padding: 10px;
}
.item {
background-color: #ddd;
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
</div>
```
###
阅读全文
相关推荐


















