Master Modern CSS Layouts: Using gap and aspect-ratio for Cleaner Code

本文翻译自 Ahmad Shadeed 的 Defensive CSS，点击文末的 “阅读原文” 可查看原文。

在早期的 Web 开发中，页面的布局和定位通常要用表格和各种 hack 技术来实现。与那时相比，CSS 已经得到了长足的发展，如今开发人员可以轻松编写适用于所有主流浏览器的 CSS 代码，简化响应式布局并删除冗余代码。

使用 gap 简化布局

在 CSS grid 出现之前，能够在 Web 页面上实现动态布局的唯一可行方案就是 Flexbox，但它缺少对间隙的支持，导致大多数样式需要使用外边距来分隔子元素，并对最后一个子元素进行特殊处理。

.flex-item:not(:last-of-type) {
  margin-right: 8px;
  margin-bottom: 8px;
}

如果要在 Flex 布局的最后一行元素取消底部外边距，往往需要使用负外边距来抵消，这增加了代码复杂度。

现在，Flex 布局支持 gap 属性，能够更简洁地处理间距：

.flex-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

Grid 布局同样支持 gap ，并且可以自动适配每列的尺寸：

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(some-min, 1fr));
  gap: 8px;
}

使用上述任一方式，浏览器会自动处理子元素之间的间隙，外边缘不会出现不必要的间距，并且 Flex 与 Grid 布局都能适配 RTL，适合创建 RTL 安全的布局。

使用 aspect-ratio 设置宽高比

假如，你想做一个 3 x 3 的正方形九宫格：

在 CSS 还没有 aspect-ratio 属性之前，通常使用内边距百分比技巧实现响应式正方形：

.square {
  height: 0;
  padding-bottom: 100%;
}

或者使用自定义属性保持宽高同步，但需要显式尺寸，无法实现响应式：

.square {
  --size: 2rem;
  width: var(--size);
  height: var(--size);
}

现在所有主流浏览器都支持 aspect-ratio ，可以更直观地表达宽高关系：

.square {
  aspect-ratio: 1;
}

如果需要给正方形设定明确宽度：

.square {
  aspect-ratio: 1;
  width: 2rem;
}

也可以使用 Grid 布局配合 aspect-ratio ：

.square-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.square {
  aspect-ratio: 1;
}

无论采用哪种方式，都能实现可自动缩放的正方形。

我最喜欢将 aspect-ratio 与其他属性组合使用，例如创建圆形：

.circle {
  aspect-ratio: 1;
  border-radius: 50%;
}

还有许多使用 aspect-ratio 的场景值得探索，例如根据需要调整嵌入媒体的大小（如 YouTube 视频），或在使用 HTML 属性设置图片宽高时防止布局变化。

CSS 每年都会出现新特性，如 leading‑trim、container queries、relative colors 等，只要掌握更多 CSS 知识，就能写出更好的代码。本文是整个系列的最后一篇。