grid-template-columns: 1fr 2fr;
时间: 2025-01-20 13:04:19 浏览: 44
### CSS Grid `grid-template-columns` 属性中的 `fr` 单位
在 CSS Grid 布局中,`grid-template-columns` 属性用于定义网格容器内的列宽。当使用 `fr` 单位时,表示的是分数单位,即每一部分占据可用空间的比例。
对于 `.grid-container { display: grid; grid- 第一列表示占总宽度的 1/4;
- 中间列表示占总宽度的一半(因为其比例为 2 对应于其他两列各占比重 1 的情况);
- 最后一列同样代表剩余四分之一的空间。
这种设定创建了一个具有三栏结构的布局,在这之中中间那栏会比两侧更宽阔一些。
#### 实际应用案例展示
下面给出一段 HTML 和对应的样式来具体说明如何利用上述配置实现页面设计效果:
```html
<div class="grid-1">Item 1</div>
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div>
<!-- 更多项目 -->
</div>
```
配合之前提到过的 CSS 定义[^1]:
```css
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.item {
background-color: #f2f2f2;
padding: 20px;
}
/* 特定项目的跨越 */
.item-1 { grid-column: 1 / 3; }
.item-2 { grid-column: 2 / 4; }
.item-3 { grid-column: 1 / -1; }
/* ...其余项省略... */
```
通过这种方式可以构建出灵活且响应式的网页组件排列方式。这里特别注意到了几个关键点:首先是设置了基础的栅格化体系;其次是针对特定元素指定了它们应该横跨哪些轨道,从而实现了更加复杂的视觉呈现逻辑。
另外一种简化写法是采用 `repeat()` 函数来重复相同模式下的多个轨道尺寸描述符,比如 `grid-template-columns: repeat(3, 1fr)` 可以用来代替显式写出三个相同比例的列定义[^2]。
阅读全文
相关推荐


















