网格元素在 Tailwind 中同时增长 CSS

Question

我正在尝试在 Tailwind CSS 中创建两个并排的容器，它们 独立地 增长。

我的问题是它们同时增长，即当我单击一个问题时，两个容器的大小都会增加。我只想增加所选问题中的那个。

我也尝试过使用 flexbox，但结果是一样的。

这是代码

<div class="mt-10 mx-20 grid gap-14 md:grid-cols-2">
  <!-- First container (left) -->
  <div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
    <h1 class="text-xl font-bold py-2">Container 1</h1>
    <div>
      <details class="pt-6 pb-4">
        <summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
          Question
        </summary>
        <span class="pt-2 pr-8">Answer</span>
      </details>
    </div>
  </div>
  <!-- Second container (right) -->
  <div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
    <h1 class="text-xl font-bold py-2">Container 2</h1>
    <div>
      <details class="pt-6 pb-4">
        <summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
          Question
        </summary>
        <span class="pt-2 pr-8">Answer</span>
      </details>
    </div>
  </div>
</div>

这是fiddle Obs：您必须让屏幕处于中断点或更高断点才能看到

Answer 1

只需将items-start添加到网格容器：

<html>

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="mt-10 mx-20 grid gap-14 md:grid-cols-2 items-start">
    
      <!-- First container (left) -->
      <div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
        <h1 class="text-xl font-bold py-2">Container 1</h1>
        <div>
          <details class="pt-6 pb-4">
            <summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
              Question
            </summary>
            <span class="pt-2 pr-8">Answer</span>
          </details>
        </div>
      </div>
      
      <!-- Second container (right) -->
      <div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
        <h1 class="text-xl font-bold py-2">Container 2</h1>
        <div>
          <details class="pt-6 pb-4">
            <summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
              Question
            </summary>
            <span class="pt-2 pr-8">Answer</span>
          </details>
        </div>
      </div>
      
    </div>
  </body>

</html>

网格元素在 Tailwind 中同时增长 CSS

Grid elements grow at the same time in Tailwind CSS

css

tailwind-css