Tailwind CSS grid布局中如何设置两个子网格为不同高度

解决方法 #

给红色<div>元素添加self-start类即可实现需求。
Grid 布局下同一行的子元素默认align-self属性为stretch，会被拉伸到和该行最高元素一致的高度，添加self-start后红色元素仅保留自身内容高度，顶部和网格行对齐，高度刚好匹配绿色盒子前两行的高度，对齐到HELLO 2位置。

修改后代码 #

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<div class="grid grid-cols-4 gap-6">
      <!-- 新增self-start类 -->
      <div class="grid gap-4 bg-red-500 self-start">
        <span>HELLO 1</span>
        <span>HELLO 2</span>
      </div>

      <div class="grid gap-4 col-span-3 bg-green-500">
        <span>HELLO 1</span>
        <span>HELLO 2</span>
        <span>HELLO 3</span>
        <span>HELLO 4</span>
        <span>HELLO 5</span>
        <span>HELLO 6</span>
      </div>
</div>

如果你希望外层网格所有子元素都默认顶部对齐，也可以选择在外层网格容器上添加items-start类，效果一致：

<div class="grid grid-cols-4 gap-6 items-start">
  <!-- 内部元素不需要额外加类 -->
</div>

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