如何使用顺风使 CSS 网格项具有自动高度？答案

【问题标题】：How can I make CSS grid items have auto height using tailwind?如何使用顺风使 CSS 网格项具有自动高度？
【发布时间】：2020-10-02 09:32:50
【问题描述】：

假设我在 Tailwindcss 的帮助下制作了这个 2 x 2 网格布局：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet"/>
<div class="inline-grid grid-cols-2 grid-rows-2">
  <div class="px-1">Full name:</div>
  <div class="px-1">Favoutite fruits:</div>
  <div class="px-1">John Doe</div>
  <div class="px-1">
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
      <li>Bananas</li>
    </ul>
  </div>
</div>

上述布局的问题在于行的高度相等，或者换句话说，所有网格项都被强制具有其中最高者的高度。

第一行的项目必须具有仅一行文本所需的高度。

我如何做到这一点？

【问题讨论】：

标签： css css-grid tailwind-css

【解决方案1】：

只需删除grid-rows-2。不用定义行，定义列就够了

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet"/>
<div class="inline-grid grid-cols-2">
  <div class="px-1">Full name:</div>
  <div class="px-1">Favoutite fruits:</div>
  <div class="px-1">John Doe</div>
  <div class="px-1">
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
      <li>Bananas</li>
    </ul>
  </div>
</div>

【讨论】：