一、什么是 gap

gap 是 容器內(nèi)部子元素之間的間距
只作用在 flex、grid、column 布局

二、簡寫 & 拆分

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

/* 只寫一個，上下左右一樣 */
gap: 20px;

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

三、核心優(yōu)點（比 margin 強太多）

1. 不額外撐大容器，不會溢出
2. 只在元素中間產(chǎn)生間距，不會有首尾多余邊距
3. 不用寫 : first-child / :last-child 清 margin
4. 布局更干凈，不用算外邊距重疊問題

四、和 margin 最大區(qū)別

• gap：容器控制內(nèi)部元素間隔，首尾無留白，布局規(guī)整
• margin：元素自己向外留白，首尾也會有邊距，容易重疊、溢出、要清邊

五、適用場景

? 推薦用 gap

• Flex 橫向 / 縱向列表
• Grid 網(wǎng)格布局
• 卡片列表、導(dǎo)航菜單、宮格布局
  ? 不適合用 gap
• 需要元素和容器邊框有外邊距時，用 padding
• 單個元素獨立上下留白，用 margin

六、兼容

現(xiàn)代項目全兼容；老舊瀏覽器完全支持 flex-gap
不用顧慮，企業(yè)項目直接放心用

七、萬能模板 直接復(fù)制

.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 列
• 屏幕變?。鹤詣邮湛s，手機自動變成 2 列、1 列
• auto-fit 自動換行，不用寫 @media

2. minmax(300px, 1fr)

• 列寬最小 300px
• 富余空間就均分占滿

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

• 大屏間距最大 24px
• 小屏最小 12px
• 中間隨屏幕自動變化，自適應(yīng)間距拉滿
  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>