阻止 CSS 网格项目随着其他项目的增长而同时增长的方法？答案

【问题标题】：Ways to stop CSS grid items from increasing simultaneously in size with other items as they grow?阻止 CSS 网格项目随着其他项目的增长而同时增长的方法？
【发布时间】：2022-11-11 14:26:15
【问题描述】：

我有许多手风琴堆叠在一起，并决定用它们制作一个简单的 2 列网格布局，如下所示：

问题是当我展开手风琴以查看其中的内容时，它旁边的手风琴的高度也会增加。请参阅下图，以便您了解我的意思。有没有办法防止这种情况发生？蒂亚:)

下面是我的代码。（我这里只包括了一个手风琴，总共有 9 个）

<div class="accordion">
    <div>
        <h3>Empowered</h3>
        <input type="checkbox" aria-hidden="true"/>

        <div>
            <span></span>
            <span></span>
        </div>

        <div class="accordion-content">
            <h4>Red</h4>
            <p>Red is a warm colour that is often said to make you feel empowered and invigorated. It is quite a bold colour that can become overpowering if used in excess. Red is therefore best used as an accent colour.</p>
        </div>

    </div>
</div>

CSS：

.accordion{
    padding: 1.3em;
    margin-bottom: 1em;
}

.accordion:last-child{
    margin-bottom: 0;
}
/* Span used to create + symbol */
.accordion span{
    display: block;
    width: 1.5em;
    height: .2em;
    background-color: var(--navy);
}

/* Rotating one of the spans vertically */
.accordion span:nth-of-type(1){
    transform: rotate(90deg) translate( 2px, 2px);
    position: relative;
    left: .08em;
    top: .08em;
}
/* Invisible checkbox that acts as click receiver */
.accordion input{
    display: block;
    width: 2em;
    height: 2em;
    float: right;
    clear: right;
    margin-top: -1.8em;
    opacity: 0;
    z-index: 2;
}
/* Moving the spans to the right of the accordion div */
.accordion div div:nth-of-type(1){
    float: right;
    margin-right: -1.9em;
    margin-top: -1.1em;
    z-index: 1;
}

.accordion h4{
    clear: right;
}

.accordion-content{
    display: none;
}

.accordion input:checked ~ .accordion-content{ 
display: initial;
}

在 750px 的屏幕宽度上，我做了一个 2 列布局：

.colour-and-mood .container div:nth-of-type(1){
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
}

/* Keeping the span display as block. */
.colour-and-mood .container div:nth-of-type(1) div:nth-of-type(1){
    display: block;
}

【问题讨论】：

标签： html css css-grid

【解决方案1】：

在网格元素上，添加样式align-items: start;。默认对齐方式是stretch，这就是您实际看到的。

【讨论】：