Динамические строки для grid-template-areas

Question

У меня есть сетка с grid-template-areas, и я хочу, чтобы элементы с классом item-left отображались слева в одной колонке, а элементы с классом item-right - справа, как на скриншоте:

Важный момент: количество элементов item-left и item-right всегда может быть разным. Поэтому я хочу, чтобы grid-template-areas работал динамически в рядах.

И я не могу менять html!

Сниппет:

ul {
    display: grid;
    grid-template-areas: "item-left item-right item-right item-right";
}

.item-left {
    grid-area: item-left;
}

.item-right {
    grid-area: item-right;
}

ul li ul {
    display: flex;
    flex-direction: column;
}

<ul>
    <li class="item-left">Itemn1</li>
    <li class="item-left">Itemn2</li>
    <li class="item-right">
        Itemn3
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
        </ul>
    </li>
    <li class="item-right">
        Itemn4
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li class="item-left">Itemn5</li>
    <li class="item-right">
        Itemn6
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li class="item-right">
        Itemn7
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li class="item-right">
        Itemn8
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li class="item-right">
        Itemn9
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li class="item-right">
        Itemn10
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
        </ul>
    </li>
</ul>

Я пытался это сделать, но безуспешно.

Answer 1

не идеально конечно... но для "не могу менять html" вроде неплохо

ul {
    display: grid;
    grid-template-columns: repeat(1fr 4);
    grid-auto-rows: 1fr; /*template area для этого надо было
    выкинуть - он фиксирует кол-во строк*/
    grid-auto-flow: column dense; /*сжимаем, убирая пустоты*/
}

.item-left {grid-column: 1;}

<ul>
    <li class="item-left">Itemn1</li>
    <li class="item-left">Itemn2</li>
    <li class="item-right">
        Itemn3
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
        </ul>
    </li>
    <li class="item-right">
        Itemn4
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li class="item-left">Itemn5</li>
    <li class="item-right">
        Itemn6
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li class="item-right">
        Itemn7
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li class="item-right">
        Itemn8
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li class="item-right">
        Itemn9
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li class="item-right">
        Itemn10
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
        </ul>
    </li>
</ul>

БЛОГ НА HUSL

Динамические строки для grid-template-areas

Ответы (1 шт):