Tailwind CSS：网格列为何高度统一？如何取消不必要拉伸？

原因分析 #

这是CSS Grid布局的默认特性：当你使用grid类启用Grid布局后，同一网格行内的所有网格项（grid items）会默认拉伸填充整个行的高度——也就是和该行最高的那个项保持一致高度。Tailwind的lg:grid只是封装了原生CSS的display: grid，所以会继承这个行为。

解决方案 #

方法1：修改网格项的对齐方式 #

给每个网格项添加lg:align-self-start类，让每个项根据自身内容高度来渲染，不再被强制拉伸到行高。修改后的代码如下：

<div class="flex">
  <div class="w-full space-y-4 p-3">
    <div class="mb-4 space-y-4 lg:grid lg:grid-cols-4 lg:gap-x-4 lg:gap-y-4 lg:space-y-0">
      <div class="bg-red-200 lg:align-self-start">
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
      </div>
      <div class="bg-green-200 lg:align-self-start">
        <p class="font-bold">dskdsksdak</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
      </div>
      <div class="bg-blue-200 lg:align-self-start">
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
      </div>
    </div>
  </div>
</div>

方法2：改用Flex布局实现多列 #

如果需要更灵活的流式布局（比如项自动换行且高度完全独立），可以把Grid换成Flex布局，配合flex-wrap和自定义宽度实现4列效果：

<div class="flex">
  <div class="w-full space-y-4 p-3">
    <div class="mb-4 space-y-4 lg:flex lg:flex-wrap lg:gap-4 lg:space-y-0">
      <div class="bg-red-200 lg:w-[23%]">
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
      </div>
      <div class="bg-green-200 lg:w-[23%]">
        <p class="font-bold">dskdsksdak</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
      </div>
      <div class="bg-blue-200 lg:w-[23%]">
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
      </div>
    </div>
  </div>
</div>

这里用lg:w-[23%]是因为4列加上gap-4的间距，总宽度刚好接近100%，你也可以根据需求调整宽度，比如用lg:flex-1 lg:min-w-[200px]实现响应式的自适应宽度。

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