首页grid-template-columns: repeat(2, 1fr);

grid-template-columns: repeat(2, 1fr);

时间: 2025-05-31 17:53:25 浏览: 18

### 解析 `grid-template-columns: repeat(2, 1fr);` 的用法 #### 基本概念 CSS Grid 中的 `repeat()` 函数用于简化重复列或行定义的过程。语法如下所示： ```css grid-template-columns: repeat(number_of_columns, track_size); ``` 其中，`number_of_columns` 表示要创建的列数，而 `track_size` 则指定了每一列的宽度[^2]。当设置为 `grid-template-columns: repeat(2, 1fr);` 时，这意味着网格容器将拥有两列，并且每列都会占据可用空间的一部分比例（即 `1fr`）。这里的单位 `fr` 被称为 fractional unit 或分数单位，代表剩余空间按比例分配给各个轨道[^1]。 #### 实际案例演示下面提供了一个具体的实例展示如何利用此功能构建简单的响应式布局： ```html <div class="grid-container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> <style> .grid-container { display: grid; /* 创建两个相等大小的列 */ grid-template-columns: repeat(2, 1fr); gap: 10px; /* 设置行列之间的间距 */ } </style> ``` 在这个例子中，无论父容器有多大尺寸变化，子项总是均匀分布在两列之中[^1]。 #### 自动填充与调整适应屏幕宽度除了固定数量外，还可以结合关键字如 auto-fill 来动态决定基于容器宽度能容纳多少列并自动补充相应数目: ```css .container{ display:grid; grid-auto-flow:dense; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } ``` 这里使用了 minmax() 函数指定最小最大范围，使得每一个项目至少宽150像素但不超过其所在区域的比例份额。 ---

阅读全文