如何修复 <grid> 容器与同一行中最高容器的高度相同？

Question

我正在努力使用 CSS 解决这个问题，我正在尝试使我的布局内的手风琴容器每个都与同一行上的最高项目具有相同的高度，理论上这会很干净并且我的项目高度和宽度相同的响应式布局：

但是目前我的手风琴高度不一样了，

以下是我的问题的简要说明：

每个手风琴都有一个图标、标题文本和副标题文本。

目前的问题是：

• 每个手风琴都有不同数量的标题和副标题字符，这使得一些容器比其他容器更小或更大。这些图标也无济于事，因为它们会进一步推动文本。

我设法在下面的沙盒中表达了我的问题： https://codesandbox.io/s/fancy-leaf-nz9x0?file=/src/index.js

理想情况下，每个手风琴项的图标、文本和字幕文本都将水平对齐在同一行上。

如何用 CSS 解决这个问题？

Answer 1

要使所有元素都具有相同的高度，下面的代码应该根据您是希望所有元素具有相同的高度还是只希望一行中的所有元素具有相同的高度来实现。

.parent{
    display: grid;
    grid-template-columns: 1fr 1fr; // two equal columns

    // choose one or other of these 
    grid-auto-rows: 1fr; // all elements the same as the tallest element
    grid-template-rows: 1fr; // elements in a row have the same height. Height is different for each row

    gap: 1rem; // gap between each element
}