CSS gap 超精简核心笔记

一、什么是 gap

gap 是 容器内部子元素之间的间距
只作用在 flex、grid、column 布局

二、简写 & 拆分

/* 上下间距 左右间距 */
gap: 行间距 列间距;

/* 只写一个，上下左右一样 */
gap: 20px;

/* 拆分写法 */
row-gap: 16px;  /* 行间距 */
column-gap: 24px; /* 列间距 */

三、核心优点（比 margin 强太多）

1. 不额外撑大容器，不会溢出
2. 只在元素中间产生间距，不会有首尾多余边距
3. 不用写 : first-child / :last-child 清 margin
4. 布局更干净，不用算外边距重叠问题

四、和 margin 最大区别

• gap：容器控制内部元素间隔，首尾无留白，布局规整
• margin：元素自己向外留白，首尾也会有边距，容易重叠、溢出、要清边

五、适用场景

✅ 推荐用 gap

• Flex 横向 / 纵向列表
• Grid 网格布局
• 卡片列表、导航菜单、宫格布局
  ❌ 不适合用 gap
• 需要元素和容器边框有外边距时，用 padding
• 单个元素独立上下留白，用 margin

六、兼容

现代项目全兼容；老旧浏览器完全支持 flex-gap
不用顾虑，企业项目直接放心用

七、万能模板 直接复制

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
}

.grid-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr); // 一行放 3 列，剩余空间均分 1 份
  grid-template-columns: 200px 300px;  /* 第1列200px 第2列300px */
  gap: 24px;
}

八、实践

.grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(12px, 2vw, 24px);
}

注释：

1. repeat(auto-fit, minmax(300px, 1fr))

• 每列最小宽度 300px
• 屏幕够大：自动排多列，PC 一行 3 列
• 屏幕变小：自动收缩，手机自动变成 2 列、1 列
• auto-fit 自动换行，不用写 @media

2. minmax(300px, 1fr)

• 列宽最小 300px
• 富余空间就均分占满

3. gap: clamp(12px, 2vw, 24px)

• 大屏间距最大 24px
• 小屏最小 12px
• 中间随屏幕自动变化，自适应间距拉满
  html如下

<div class="grid-list">
  <div class="item">卡片1</div>
  <div class="item">卡片2</div>
  <div class="item">卡片3</div>
  <div class="item">卡片4</div>
</div>