从使用行跨度的显式高度到基于内容的最大高度

Question

只是想知道是否可以使用

row-start-x

和

row-span-x

设置元素的高度，然后在不同的断点处恢复为由内容确定的大小？

在附图中，您可以看到内容元素的高度增加，因为在较小的尺寸下，我设置了

sm:row-end-8

和

sm:row-span-3

，但我宁愿它没有在某些尺寸下。

谢谢！

Codepen：https://codepen.io/nwoodward/pen/OJdrOzx?editors=1010

console.clear();

<script src="https://cdn.tailwindcss.com"></script>

<div class="mx-auto py-12 bg-blue-600 sm:bg-green-500  md:bg-purple-500 w-full h-screen flex items-center justify-center">
  <div class="card border border-red-500 relative  grid sm:grid-cols-8 lg:grid-cols-1 sm:grid-rows-6  gap-y-4 sm:gap-y-0 lg:gap-y-6 w-full">
    <img class="card__image border border-blue-500 object-fill sm:col-start-2 sm:col-span-7 sm:row-start-1 sm:row-span-5 rounded-lg shadow" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Snowboard_pow.jpg/1280px-Snowboard_pow.jpg" />

    <div class="card__content bg-slate-500 border border-yellow-500 sm:row-end-7 sm:row-span-3 md:row-end-7  flex flex-col pb-7 pt-5 lg:px-4 xl:px-8 space-y-2.5 shadow rounded-lg bg-slate-50 grow sm:col-start-1  sm:col-span-6">
      <div class=" flex items-center pl-4 pr-6 lg:pl-2 sm:py-1 gap-x-4 leading-7 text-gray-600 text-lg  font-semibold  ">
        <div class="flex items-center justify-center rounded-full ">{icon}</div>
        <div class="">
          {title}
        </div>
      </div>
      <div class=" pl-7 lg:pl-3 pr-5 text-base md:text-lg md:leading-7 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam culpa earum perspiciatis tempore quisquam ea vitae, suscipit nostrum hic. Quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit voluptatibus obcaecati laudantium illo
        magnam tempora quod sequi, porro eius repellendus.</div>
      <a class="flex grow justify-end items-end space-x-1  pl-7 lg:pl-3 pr-7 font-medium  text-primary">
        <div class="flex gap-2">
          <div>{linkText}</div>
          <ArrowTopRight class="text-primary w-3 h-3" />
        </div>
      </a>
    </div>
  </div>
</div>

Answer 1

您没有指定内容元素的高度增长的“某些尺寸”，但您可以将

align-self: start

应用于元素，使其与内容一样高：

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="mx-auto py-12 bg-blue-600 sm:bg-green-500  md:bg-purple-500 w-full h-screen flex items-center justify-center">
  <div class="card border border-red-500 relative  grid sm:grid-cols-8 lg:grid-cols-1 sm:grid-rows-6  gap-y-4 sm:gap-y-0 lg:gap-y-6 w-full">
    <img class="card__image border border-blue-500 object-fill sm:col-start-2 sm:col-span-7 sm:row-start-1 sm:row-span-5 rounded-lg shadow" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Snowboard_pow.jpg/1280px-Snowboard_pow.jpg" />

    <div class="card__content bg-slate-500 border border-yellow-500 sm:row-end-7 sm:row-span-3 md:row-end-7  flex flex-col pb-7 pt-5 lg:px-4 xl:px-8 space-y-2.5 shadow rounded-lg bg-slate-50 grow sm:col-start-1  sm:col-span-6 sm:self-start">
      <div class=" flex items-center pl-4 pr-6 lg:pl-2 sm:py-1 gap-x-4 leading-7 text-gray-600 text-lg  font-semibold  ">
        <div class="flex items-center justify-center rounded-full ">{icon}</div>
        <div class="">
          {title}
        </div>
      </div>
      <div class=" pl-7 lg:pl-3 pr-5 text-base md:text-lg md:leading-7 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam culpa earum perspiciatis tempore quisquam ea vitae, suscipit nostrum hic. Quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit voluptatibus obcaecati laudantium illo
        magnam tempora quod sequi, porro eius repellendus.</div>
      <a class="flex grow justify-end items-end space-x-1  pl-7 lg:pl-3 pr-7 font-medium  text-primary">
        <div class="flex gap-2">
          <div>{linkText}</div>
          <ArrowTopRight class="text-primary w-3 h-3" />
        </div>
      </a>
    </div>
  </div>
</div>