如何让网格剩余项居中？求平板布局的替代实现方案

以下是几种能实现同款平板布局的替代方案：

1. Flexbox响应式布局 #

用Flexbox也能达成效果，通过媒体查询调整卡片宽度，结合flex-wrap自动换行：

<div class="flex flex-wrap justify-center gap-8 px-8 mt-8">
  <div class="w-28 aspect-video bg-green-500 md:w-[calc(33.333%-16px)] lg:w-[calc(25%-16px)]"></div>
  <div class="w-28 aspect-video bg-green-500 md:w-[calc(33.333%-16px)] lg:w-[calc(25%-16px)]"></div>
  <div class="w-28 aspect-video bg-green-500 md:w-[calc(33.333%-16px)] lg:w-[calc(25%-16px)]"></div>
  <div class="w-28 aspect-video bg-green-500 md:w-[calc(33.333%-16px)] lg:w-[calc(25%-16px)]"></div>
  <div class="w-28 aspect-video bg-green-500 md:w-[calc(33.333%-16px)] lg:w-[calc(25%-16px)]"></div>
  <div class="w-28 aspect-video bg-green-500 md:w-[calc(33.333%-16px)] lg:w-[calc(25%-16px)]"></div>
  <div class="w-28 aspect-video bg-green-500 md:w-[calc(33.333%-16px)] lg:w-[calc(25%-16px)]"></div>
  <div class="w-28 aspect-video bg-green-500 md:w-[calc(33.333%-16px)] lg:w-[calc(25%-16px)]"></div>
</div>

计算宽度时减去gap的总占用（左右各8px，合计16px），保证卡片在每行均匀分布。

2. 原生CSS Grid方案 #

如果不想依赖Tailwind的预设类，直接写原生CSS灵活性更高：

<style>
  .card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    justify-items: center;
    padding: 2rem;
    margin-top: 2rem;
  }
  .card {
    width: 7rem;
    aspect-ratio: 16/9;
    background-color: #22c55e;
  }
  @media (min-width: 768px) {
    .card-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1024px) {
    .card-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
</style>
<div class="card-grid">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

原生写法可以自定义断点和样式细节，适合需要高度定制的场景。

3. 自适应CSS Grid布局（无需手动指定列数） #

用auto-fit+minmax让浏览器自动根据容器宽度调整列数，不用写多个媒体查询：

Tailwind版本 #

<div class="grid grid-cols-[repeat(auto-fit,minmax(7rem,1fr))] gap-8 px-8 mt-8 justify-items-center">
  <div class="aspect-video bg-green-500"></div>
  <div class="aspect-video bg-green-500"></div>
  <div class="aspect-video bg-green-500"></div>
  <div class="aspect-video bg-green-500"></div>
  <div class="aspect-video bg-green-500"></div>
  <div class="aspect-video bg-green-500"></div>
  <div class="aspect-video bg-green-500"></div>
  <div class="aspect-video bg-green-500"></div>
</div>

minmax(7rem,1fr)定义卡片最小宽度为7rem，剩余空间自动分配；auto-fit会自动填充列数，适配各种屏幕尺寸。

原生CSS版本 #

<style>
  .auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 2rem;
    justify-items: center;
    padding: 2rem;
    margin-top: 2rem;
  }
  .card {
    aspect-ratio: 16/9;
    background-color: #22c55e;
    width: 100%;
  }
</style>
<div class="auto-grid">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

这种方案的优势是无需手动维护断点列数，浏览器自动完成适配。

内容的提问来源于stack exchange，提问作者RiftXD