css grid实现流体布局

用户4818377208032025-06-06 10:13

虽然使用flex也可以实现流式布局，但是我觉得使用Grid实现布局更方便，也更好控制。

使用CSS Grid实现流式布局的步骤：

css 复制代码

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  ...
</div>

css 复制代码

.grid-container {
  display: grid;
  // 规定网格布局中的列数（和宽度）
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 定义列宽 */
  gap: 0px; /* 设置网格项之间的间隔 */
}

css解析

repeat(重复次数, 轨道尺寸)
auto-fill会根据可用空间自动填充尽可能多的列或行
minmax(min, max)函数定义了列或行的最小和最大尺寸
fr单位允许列宽根据可用空间动态调整

所以grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 的意思就是满足每列最小200px的情况下自动调整列数填充尽可能多的列，填充尽可能多的列后剩余宽度再分配给每一列 ,假设屏幕宽度是900，填充后就是4列，每列宽度是200+(100/4) = 225, 前提是gap: 0px的情况下

还可以配合媒体查询实现响应式布局

css 复制代码

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
 
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 小屏幕时调整最小宽度 */
  }
}