网格元素在 Tailwind CSS 中同时增长
Posted
技术标签:
【中文标题】网格元素在 Tailwind CSS 中同时增长【英文标题】：Grid elements grow at the same time in 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：你必须让屏幕处于中等断点或更高的位置才能看到
【问题讨论】：
【参考方案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 中同时增长的主要内容，如果未能解决你的问题，请参考以下文章
CSS Grid/Tailwind 在“下一行”动态插入，同时仍然是响应式的
Tailwind CSS 网格提供 3 行而不是 3 列，但仅适用于 grid-cols-6