现代 CSS 布局指南

现代 CSS 提供了强大的布局能力，让我们能以更少的代码实现更复杂的布局。

CSS Grid

Grid 是二维布局的最佳选择：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

Flexbox

Flexbox 适合一维布局，特别是在需要对齐和分布空间时：

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

Container Queries

容器查询让组件能根据自身容器的大小进行响应式调整，而非视口大小：

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

实战：博客卡片布局

结合以上技术，下面是一个博客卡片布局示例：

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 1.5rem;
}

.blog-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

总结

现代 CSS 布局工具已经非常成熟。Grid + Flexbox + Container Queries 的组合几乎能应对所有布局场景，不再需要依赖第三方布局库。