Tailwind Grid系统如何实现单列面板高度自适应且不影响其他列

Tailwind Grid默认会让同一网格行内的项目自动拉伸到相同高度（对应CSS的align-items: stretch），要实现面板高度随内容灵活变化且互不影响，只需要调整对齐规则即可，有两种常用方式：

方式一：全局设置所有面板顶部对齐 #

给Grid容器添加items-start类，这样所有网格项都会以顶部对齐，高度完全由自身内容决定，不会被同行其他面板拉伸：

<div class="grid grid-cols-2 gap-4 items-start">
  <!-- 第一列面板 -->
  <div class="p-4 bg-gray-100">baz</div>
  <div class="p-4 bg-gray-100">baz2...extends<br>更多内容行1<br>更多内容行2</div>
  
  <!-- 第二列面板 -->
  <div class="p-4 bg-gray-200">bim</div>
  <div class="p-4 bg-gray-200">bim3</div>
</div>

方式二：单独设置特定面板不拉伸 #

如果只需要部分面板避免被拉伸，给目标面板添加self-start类即可，其他面板保持默认的拉伸行为：

<div class="grid grid-cols-2 gap-4">
  <div class="p-4 bg-gray-100">baz</div>
  <!-- 这个面板不会被同行的baz2拉伸 -->
  <div class="p-4 bg-gray-200 self-start">bim</div>
  <div class="p-4 bg-gray-100">baz2...extends<br>更多内容行1<br>更多内容行2</div>
  <div class="p-4 bg-gray-200">bim3</div>
</div>

补充说明 #

你提供的表格结构中，<tr>会强制同一行的<td>高度一致，这是表格的原生特性。而Tailwind Grid通过上述对齐方式，可以打破这种行内高度同步的限制，让每个网格项的高度完全独立。

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