Создание адаптивных макетов сетки, где все элементы равноудалены друг от друга по вертикали и горизонтали

Question

Как можно создать вертикальное «равносильное» выравнивание элементов, видимое в «неровных» сетках, таких как макеты (например, https://www.zergnet.com/)?

Я попробовал CSS flex layout, чтобы сделать то же самое, и все, что я получил, это:

Мой код выглядит примерно так (упрощенная версия), и приведенный выше снимок экрана был сделан, когда область просмотра была установлена ​​на ширину 320 пикселей:

Моя цель - создать макет, в котором все кнопки справа на изображении выше имеют такое же вертикальное пространство между ними, как и кнопки слева. Дизайн также должен быть полностью адаптивным.

<div style="display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;">
    <button>Lorem ipsum</button>
    <button>Lorem ipsum gypsum</button>
    <button>Lorem ipsum</button>
    <button>Lorem ipsum gypsum</button>
    <button>Lorem ipsum</button>
</div>

Answer 1

Если вы имеете в виду нечто подобное, вы ищете flex-direction: column и justify-content: flex-start;, которые являются свойствами flexbox.

Подробнее об этом можно прочитать здесь .

<div class="wrapper">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>7</button>
        <button>8</button>
    </div>
<style>
    .wrapper {
            width: 300px; height: 270px;
            border: 1px solid blue;
            display:flex;
            align-items:flex-start;
            flex-wrap:wrap;
            flex-direction: column;
            justify-content: flex-start;
    }
    .wrapper button {  width: 70px; height: 50px; margin: 6px;}
    .wrapper button:nth-child(2),
    .wrapper button:nth-child(4),
    .wrapper button:nth-child(6) {  height: 80px; }
</style>