I have a grid, with 4 columns, but its only a grid on lg screens.

I’m trying to understand why each column has a fixed height of the longest column?

Is there a way for other columns not to be stretched unnecessarily just because others are longer?

Here is a demo:

<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">
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
      </div>
      <div class="bg-green-200">
        <p class="font-bold">dskdsksdak</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
      </div>
      <div class="bg-blue-200">
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
        <p>skksdkaskaksaksadksakas</p>
      </div>
    </div>
  </div>
</div>