Как создать flexible верстку?

Question

[AskJs]

Как создать такую верстку, что б не оставалось пустого места между карточками?

<div class="wrap">
                    <div class="test">
                        1
                    </div>
                    <div class="test">
                        2
                    </div>
                    <div class="test">
                        3
                    </div>
                    <div class="test">
                        4
                    </div>
                    <div class="test">
                        5
                    </div>
                    <div class="test">
                        6
                    </div>
                </div>

.wrap {
    display: block;
}

.test {
    display: inline-block;
    width: 200px; // одна карточка будет к примеру 400px
    height: 160px; // одна карточка будет к примеру 320px
}

Answer 1

[Сергей Попов]

То, что вы пытаетесь сделать называется Mansory Layout. Короткая обзорная статья с примерами.
Существует несколько способов это сделать. Если хотите с использованием флексбоксов, то, пожалуйте в эту статью.
Есть возможность сделать с помощью grid-сетки. Для этого посмотрите на эту реализацию.
И наконец, наиболее простое и удобное в плане организации решение - вот такой вот плагин, с которого все началось.

Comments

[AskJs]

спасибо)

[AskJs]

Но Mansory не очень понятно работает с Angular 5/6(

[Сергей Попов]

AskJs, Достаточно просто открыть гугл и решение вашей проблемы будет найдено

[AskJs]

ну попробуйте включить в angular 6 то что там пишут

Answer 2

[Сергей delphinpro]

как вариант https://codepen.io/delphinpro/pen/BWJEgG

Comments

[AskJs]

неплохое решение, спасибо

[AskJs]

а не знаете как к примеру сделать размер 2х3 или 3х3?

[Сергей delphinpro]

AskJs, ну так же. там принцип простой, через отрицательные марджины.

[AskJs]

Сергей delphinpro, у меня вот такое получаеться при 3х3

[Сергей delphinpro]

AskJs, там нет автораскладки =)
Пятнадцатый тайл нужно подтянуть вверх, шестнадцатый вверх и вправо и т.д.
https://codepen.io/delphinpro/pen/gjWzPb?editors=1100

[AskJs]

Сергей delphinpro, сложно))
Последний вопрос, что за баг если поставить 2 раза подряд 2х2?
Можете подсказать как избавить от таких багов? если у Вас есть время