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

【问题标题】：Grid elements grow at the same time in Tailwind CSS网格元素在 Tailwind CSS 中同时增长
【发布时间】：2021-05-18 18:10:38
【问题描述】：

我正在尝试在 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：你必须让屏幕处于中等断点或更高的位置才能看到

【问题讨论】：

标签： css tailwind-css

【解决方案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>

【讨论】：

如此简单且非常有意义，因为默认值为拉伸...谢谢！