一个网格中有两个网格但高度不同？如何？

Posted 2023-03-07

【中文标题】一个网格中有两个网格但高度不同？如何？

【英文标题】：Two grids in a grid but different height? How?

【发布时间】：2021-12-19 03:29:57

【问题描述】：

我可以请你帮忙解决这个https://play.tailwindcss.com/fIuk5aXhz0吗？

我现在拥有的：

我需要的是降低红色 div 的高度，就在绿色框的 HELLO 2 之后，如下所示：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<div class="grid grid-cols-4 gap-6">
      <div class="grid gap-4 bg-red-500">
        <span>HELLO 1</span>
        <span>HELLO 2</span>
      </div>

      <div class="grid gap-4 col-span-3 bg-green-500">
        <span>HELLO 1</span>
        <span>HELLO 2</span>
        <span>HELLO 3</span>
        <span>HELLO 4</span>
        <span>HELLO 5</span>
        <span>HELLO 6</span>
      </div>
</div>

【参考方案1】：

在这种情况下，我认为您可以使用auto-rows-min 并将HELLO 中的这两个包装在div 中。

example

【参考方案2】：

我是这样理解的。左栏应该不受右栏高度的影响吧？如果是这样，那么我会以这种方式实现它。

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css' media='all' />

<div class="bg-gray-400 min-h-screen flex items-center justify-center ">

  <div class="grid grid-cols-2 gap-2 w-1/2">    
    
    <div class="row-span-2  rounded ">
      <div class="bg-white p-10 rounded bg-green-100 mb-2">Block A</div>
      <div class="bg-white p-10 rounded bg-green-100 ">Block B</div>
    </div>    
    <div class="row-span-2 bg-white p-10 rounded">lorem lorem lroem lorem lorem lroem lorem lorem lroemlorem lorem lroemlorem lorem lroem lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem  lorem lorem lroem 
    lorem lorem lroem lorem lorem lroem lorem lorem lroem  
    </div>
  </div>
</div>