Почему Flex box укладывает предметы из сетки

Question

Я использую masonry.js для создания сетки изображений.

Мой HTML-код выглядит так:

<div class="new-starter-grid">
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
    <div class="new-starter-grid-item"></div>
</div>

CSS, который стилизует эти элементы,следующее:

.new-starter-grid
{
    top: 20%;
    max-width: 60%;
}

.new-starter-grid-item
{
    float: left;
    width: 120px;
    height: 120px;
    border-radius: 3px;
    background: #D26;
    margin-bottom: 10px;
}

Это прекрасно работает и создает сетку, которая выглядит следующим образом:

Я сейчас пытаюсь обернуть сетку вконтейнер (который также затемняет экран) и отображать его в центре.

Чтобы сделать это, я просто обертываю элемент сетки другим div, например:

<div class="new-starter-modal">
    <div class="new-starter-grid">
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
        <div class="new-starter-grid-item"></div>
    </div>
</div>

ИЯ использую следующий стиль, чтобы попытаться центрировать сетку в новом div:

.new-starter-modal
{
    position: fixed;
    display: flex;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    z-index: 9999 !important; /* To make sure no pesky components decide to go on top of the this modal */
}

Сетка технически центрируется, но в итоге она складывает все элементы следующим образом:

Я, очевидно, не хочу, чтобы это произошло, и в идеале хотелось бы, чтобы сетка оставалась такой же, как на рисунке 1, только по центру по горизонтали (именно поэтому я использую flex box).

Может кто-нибудь объяснить мне, почему это происходит, и как я мог это исправить?

Answer 1

Попробуйте изменить max-width на width на новой стартовой сетке.То есть, или добавьте flex: 1 для работы вместе с max-width.В противном случае ваш элемент сетки не имеет ничего, определяющего, насколько широким он должен быть и, вероятно, вызывает коллапс.Кроме того, использование поплавков на элементе .new-starter-grid-item похоже на борьбу с функциональностью кладки.