如何在各网格项数量不同时使用CSS Grid布局

我希望实现目标布局效果，但当前代码呈现的是现有效果。我是HTML和CSS新手，尝试过3×2的Grid布局，也试过Flex布局，都无法达到预期。以下是我的代码：

现有CSS代码 #

.checkbox {border: 0;display: grid;grid-template-columns: max-content max-content;align-items: center;padding-left: 0;}.boxContainer {min-width: 40vh;}.checkbox label {display: block;position: relative;margin-bottom: .25em;}.checkbox label input {margin-right: .5em;}.checkbox .time {position: absolute;right: 30%}

现有HTML代码 #

<fieldset class="checkbox">
    <div class="title">Ringnes-Ronny</div>
    <div class="boxContainer">
        <label><input type="checkbox">Polisen<span class="time">59 SEK</span></label>
        <label><input type="checkbox">Valhalla<span class="time">39 SEK</span></label>
        <label><input type="checkbox">Raggare på stureplan<span class="time">49 SEK</span></label>
        <label><input type="checkbox">Monster<span class="time">39 SEK</span></label>
    </div>
    </div>
    <div class="title">Miss Li</div>
    <div class="boxContainer">
        <label><input type="checkbox">Instruktionsboken<span class="time">39 SEK</span></label>
        <label><input type="checkbox">Komplicerad<span class="time">49 SEK</span></label>
        <label><input type="checkbox">Starkare<span class="time">(kan ej beställas)</span></label>
    </div>
    <div class="title">Avicii</div>
    <div class="boxContainer">
        <label><input type="checkbox">Wake Me Up<span class="time">59 SEK</span></label>
        <label><input type="checkbox">Hey Brother<span class="time">49 SEK</span></label>
        <label><input type="checkbox">Waiting For Love<span class="time">(kan ej beställas)</span></label>
        <label><input type="checkbox">You Make Me<span class="time">29 SEK</span></label>
        <label><input type="checkbox">Levels<span class="time">49 SEK</span></label>
    </div>
</fieldset>

先修复HTML的结构错误（原代码多了一个闭合</div>导致嵌套混乱），再通过Grid+Flex布局调整实现目标效果：

修改后的完整代码 #

HTML #

<fieldset class="checkbox">
    <!-- 每个艺术家的内容统一包裹在容器中 -->
    <div class="artist-group">
        <div class="title">Ringnes-Ronny</div>
        <div class="boxContainer">
            <label>
                <input type="checkbox">
                <span class="song-name">Polisen</span>
                <span class="time">59 SEK</span>
            </label>
            <label>
                <input type="checkbox">
                <span class="song-name">Valhalla</span>
                <span class="time">39 SEK</span>
            </label>
            <label>
                <input type="checkbox">
                <span class="song-name">Raggare på stureplan</span>
                <span class="time">49 SEK</span>
            </label>
            <label>
                <input type="checkbox">
                <span class="song-name">Monster</span>
                <span class="time">39 SEK</span>
            </label>
        </div>
    </div>

    <div class="artist-group">
        <div class="title">Miss Li</div>
        <div class="boxContainer">
            <label>
                <input type="checkbox">
                <span class="song-name">Instruktionsboken</span>
                <span class="time">39 SEK</span>
            </label>
            <label>
                <input type="checkbox">
                <span class="song-name">Komplicerad</span>
                <span class="time">49 SEK</span>
            </label>
            <label>
                <input type="checkbox">
                <span class="song-name">Starkare</span>
                <span class="time">(kan ej beställas)</span>
            </label>
        </div>
    </div>

    <div class="artist-group">
        <div class="title">Avicii</div>
        <div class="boxContainer">
            <label>
                <input type="checkbox">
                <span class="song-name">Wake Me Up</span>
                <span class="time">59 SEK</span>
            </label>
            <label>
                <input type="checkbox">
                <span class="song-name">Hey Brother</span>
                <span class="time">49 SEK</span>
            </label>
            <label>
                <input type="checkbox">
                <span class="song-name">Waiting For Love</span>
                <span class="time">(kan ej beställas)</span>
            </label>
            <label>
                <input type="checkbox">
                <span class="song-name">You Make Me</span>
                <span class="time">29 SEK</span>
            </label>
            <label>
                <input type="checkbox">
                <span class="song-name">Levels</span>
                <span class="time">49 SEK</span>
            </label>
        </div>
    </div>
</fieldset>

CSS #

.checkbox {
    border: 0;
    display: grid;
    /* 设置三列等宽布局，匹配目标效果 */
    grid-template-columns: repeat(3, 1fr);
    gap: 2em; /* 列之间的间距 */
    padding-left: 0;
}

.artist-group {
    display: flex;
    flex-direction: column;
}

.boxContainer {
    min-width: auto; /* 去掉固定宽度，让内容自适应 */
}

.checkbox label {
    display: flex;
    justify-content: space-between; /* 实现歌曲名和价格左右两端对齐 */
    align-items: center;
    margin-bottom: .5em;
    padding: .2em 0;
}

.checkbox label input {
    margin-right: .5em;
}

.song-name {
    flex: 1;
    margin-left: .3em;
}

.time {
    /* 去掉绝对定位，用Flex实现稳定右对齐 */
    margin-left: 1em;
    white-space: nowrap; /* 防止价格换行 */
}

.title {
    font-weight: bold;
    margin-bottom: .8em;
    font-size: 1.1em;
}

关键调整说明 #

1. HTML结构优化：用.artist-group包裹每个艺术家的标题和选项，让Grid布局能正确识别每一列的独立区块，避免结构混乱。
2. Grid布局调整：将.checkbox的列设置为repeat(3, 1fr)，实现三列等宽的横向布局，匹配目标效果。
3. Flex替代绝对定位：给label设置Flex布局，通过justify-content: space-between让歌曲名和价格自然左右对齐，解决原绝对定位导致的布局错位问题。
4. 细节优化：增加间距、加粗标题、防止价格换行，提升整体美观度。

内容的提问来源于stack exchange，提问作者user15227357