在CSS Grid Layout（網格布局）和Flexbox（彈性盒布局）中，gap 是一個縮寫屬性，用于同時設置行間隙（gutter）和列間隙（在Flexbox中通常稱為“交叉軸間隙”）的大小。這個屬性極大地簡化了之前需要分別設置 row-gap（或 grid-row-gap 在舊版CSS Grid中）和 column-gap（或 grid-column-gap）的繁瑣過程。
在Grid Layout中使用
在CSS Grid Layout中，gap 屬性可以同時設置網格行和網格列之間的間隙大小。
.grid-container {display: grid;grid-template-columns: repeat(3, 1fr); /* 創建三個等寬的列 */gap: 20px; /* 同時設置行和列間隙為20px *//* 或者更具體地 *//* gap: 20px 30px; /* 第一個值設置行間隙，第二個值設置列間隙 */
}
在Flexbox中使用
在Flexbox中，gap 屬性用于設置flex項之間的間隙，這包括在主軸（main axis）和交叉軸（cross axis）上的間隙（盡管在Flexbox中，交叉軸間隙的概念可能不如Grid中那么直觀，因為它主要影響多行flex容器的布局）。
.flex-container {display: flex;flex-wrap: wrap; /* 允許flex項換行 */gap: 10px; /* 同時設置主軸和交叉軸上的間隙為10px *//* 或者更具體地 *//* row-gap: 10px; /* 僅在需要時設置行間隙 *//* column-gap: 15px; /* 僅在需要時設置列間隙（或交叉軸間隙），但這在Flexbox中通常不太常見 */
}
請注意，gap 屬性的值可以是長度（如 px、em、vw 等）、百分比或其他任何row-gap和column-gap接受的合法值。此外，如果你需要為row-gap和column-gap設置不同的值，你可以將這兩個值作為gap屬性的兩個參數來提供，第一個值對應行間隙，第二個值對應列間隙（在Grid中）或交叉軸間隙（在Flexbox中，盡管這不太常見）。
值得注意的是，雖然gap屬性在最新的瀏覽器版本中得到廣泛支持，但在編寫CSS時仍然應該考慮到向后兼容性，并可能需要使用-webkit-前綴（對于某些舊版瀏覽器）或提供回退方案。
