【实战】Grid布局-响应式网格

Grid 是一个二维布局系统，通过定义行和列来精确控制网页元素的位置。

案例

场景：响应式网格
需求：列数随容器宽度自动变化，适配不同屏幕
Grid 属性：grid-template-columns: repeat(auto-fit, minmax(基础宽度, 1fr))

原理

auto-fit 拉伸列以填满容器。当项目数量不足以填满所有行时，空白轨道会被合并，现有项目扩展占据空间。
auto-fill 尽可能创建轨道占位。即使项目数量少，也会创建看不见的空白轨道来维持轨道数量，项目不会拉伸。
minmax(min, max) 定义尺寸范围。min是最小尺寸（如250px），max是最大尺寸（如1fr）。

示例

<div class="container">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
  <div class="item">项目 4</div>
  <div class="item">项目 5</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.item {
  background-color: #fdfdfd;
  padding: 10px;
  text-align: center;
}

效果图