让我们假设我在tailwindcss的帮助下制作了这个2乘2网格布局:
null
<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>null
上述布局的问题在于行的高度相等，或者换句话说，所有网格项都被强制具有其中最高者的高度。
第一行上的项必须具有仅单行文本所需的高度。
我怎么才能做到呢？
只需删除grid-rows-2即可。 不需要定义行，定义列就足够了
null
<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>