Tailwind CSS Grid布局问题：如何将第二张图片移至第二行

你需要实现的目标布局：

当前代码中第二张小图和第一张并排第一行，是因为网格默认按行优先的自动流排列。要把第二张小图移到第二行，只需给它的容器添加row-start-2（Tailwind 布局类），指定其从第二行开始渲染。

修改后的React代码 #

<div className="grid grid-rows-2 grid-cols-4 gap-5">
  <div className="col-span-1 row-span-1">
    <img src="/assets/product-xx99-mark-two-headphones/desktop/image-gallery-3.jpg" />
  </div>

  <div className="col-span-1 row-span-1 row-start-2">
    <img src="/assets/product-xx99-mark-two-headphones/desktop/image-gallery-3.jpg" />
  </div>

  <div className="col-span-2 row-span-2">
    <img src="/assets/product-xx99-mark-two-headphones/desktop/image-gallery-3.jpg" />
  </div>
</div>

可运行演示代码 #

CSS 样式

.grid {
  width: 100%;
  height: 15rem;
}

.img {
  background-color: #ccc;
  width: 100%;
  height: 100%;
}

/* Tailwind 核心样式模拟 */
.grid { display: grid; }
.grid-rows-2 { grid-template-rows: repeat(2, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.gap-5 { gap: 5px; }
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-start-2 { grid-row-start: 2; }

HTML 结构

<div class="grid grid-rows-2 grid-cols-4 gap-5">
  <div class="col-span-1 row-span-1">
    <div class="img"></div>
  </div>

  <div class="col-span-1 row-span-1 row-start-2">
    <div class="img"></div>
  </div>

  <div class="col-span-2 row-span-2">
    <div class="img"></div>
  </div>
</div>

原理说明 #

网格默认采用行优先的自动排列规则，会先填满第一行的可用空间再换行。通过给第二张小图的容器设置row-start-2，强制它从第二行的起始位置布局，此时第一行仅容纳第一张小图和右侧的大图片（大图片跨2行2列），第二行则容纳第二张小图和大图片的下半部分，完美匹配目标布局。

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