CSS gap属性介绍及在布局中的使用

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197441.html

1. 语法
2. 取值

CSS 中的 gap 属性是 row-gap 和 column-gap 的简写，它指定间距的大小，即 grid、flex 和 multi-column 布局中行和列之间的空间。

/* Grid layout */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 2fr 1fr;
  gap: 30px 20px;
}

/* Flex layout */
.container {
  display: flex;
  gap: 10%;
}

/* Multi-column layout */
.container {
  column-count: 5;
  gap: 20px;
}

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/