Каким способом оформить списки, чтобы высота колонок равнялась меньшей колонке, а остальное переносилось на следующую строку?

&__data-list {
    display: grid;
    justify-content: center;
    column-gap: rem(20);
    row-gap: rem(30);
    grid-template-columns: repeat(auto-fill, rem(320));
    @media (min-width: rem(650)) {
        justify-content: space-around;
    }
    @media (min-width: rem(970)) {
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, rem(300));
    }
}
<ul class="poetry__data-list data-list">
                <li>
                    <h2>1990+ г.</h2>
                    <ul class="poetry__list poetry-list">
                        <li>
                            <button class="poetry-list__preview preview" aria-label="Ознакомиться с произведением">
                                <span class="preview__title">Птицей в ветках затаилась...</span>
                                <span class="preview__audio _icon-audio"></span>
                                <span class="preview__video _icon-youtube"></span>
                            </button>
                            <br/>
                            <a href="#" class="poetry__teg">Вслед за светом</a>
                            <p class=""></p>
                        </li>
                        <li>
                            <button class="poetry-list__preview preview" aria-label="Ознакомиться с произведением">
                                <span class="preview__title">Птицей в ветках затаилась...</span>
                                <span class="preview__audio _icon-audio"></span>
                                <span class="preview__video _icon-youtube"></span>
                            </button>
                            <br />
                            <a href="#" class="poetry__teg">Вслед за светом</a>
                            <p class=""></p>
                        </li>
                    </ul>
                </li>
                <li>
                    <h2>2000 г.</h2>
                    <ul class="poetry__list poetry-list">
                        <li>
                            <button class="poetry-list__preview preview" aria-label="Ознакомиться с произведением">
                                <span class="preview__title">Птицей в ветках затаилась...</span>
                                <span class="preview__audio _icon-audio"></span>
                                <span class="preview__video _icon-youtube"></span>
                            </button>
                            <br />
                            <a href="#" class="poetry__teg">Вслед за светом</a>
                            <p class=""></p>
                        </li>
                        <li>
                            <button class="poetry-list__preview preview" aria-label="Ознакомиться с произведением">
                                <span class="preview__title">Птицей в ветках затаилась...</span>
                                <span class="preview__audio _icon-audio"></span>
                                <span class="preview__video _icon-youtube"></span>
                            </button>
                            <br />
                            <a href="#" class="poetry__teg">Вслед за светом</a>
                            <p class=""></p>
                        </li>
                    </ul>
                </li>