Grid布局之minmax()/repeat()

minmax() 和 repeat() 是 Grid 布局中的两个核心函数，用于定义灵活的轨道尺寸。

minmax() 函数

定义轨道尺寸的最小值和最大值范围。

语法

minmax(min, max)

参数说明

.container {
  display: grid;
  /* 最小100px，最大1fr */
  grid-template-columns: minmax(100px, 1fr);
  /* 最小200px，最大50% */
  grid-template-columns: minmax(200px, 50%);
  /* 最小内容宽度，最大最大内容宽度 */
  grid-template-columns: minmax(min-content, max-content);
}

常见用法

/* 响应式卡片布局 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

repeat() 函数

简化重复轨道的定义，避免冗余代码。

语法

repeat(次数, 轨道尺寸)

基本用法

.container {
  display: grid;
  /* 3个等宽列 */
  grid-template-columns: repeat(3, 1fr);
  /* 等价于 */
  grid-template-columns: 1fr 1fr 1fr;

  /* 重复多个尺寸 */
  grid-template-columns: repeat(2, 100px 50px);
  /* 等价于 */
  grid-template-columns: 100px 50px 100px 50px;
}

自动填充模式

/* auto-fill：尽可能多地填充轨道 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  /* 自动填充200px宽度的列 */
}

/* auto-fit：自动调整轨道 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* 响应式自适应 */
}

两者结合使用

/* 经典响应式网格布局 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  background: #f5f5f5;
  padding: 20px;
}

<div class="container">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
</div>

要点总结

• minmax(min, max) 定义尺寸范围，实现弹性布局
• repeat(n, size) 简化重复定义
• repeat(auto-fit, minmax(min, 1fr)) 是响应式网格的标准写法
• auto-fill 尽可能多填充，auto-fit 自动收缩空轨道