Как создать чистый макет с выравниванием по левому краю с четырьмя столбцами, используя justify-content: space-ween

Question

Я пытаюсь создать отображаемый компонент блога с помощью Flexbox, который в основном использует justify-content: space-between, В макете с 4 столбцами это выглядит великолепно, когда есть 4 сообщения, чтобы заполнить строку. Проблема в том, что не 4 сообщения, а 2 или 3. На этом этапе сообщения распределяются, и это выглядит просто неаккуратно. Я хочу использовать flexbox без JavaScript и хочу, чтобы макет был полностью адаптивным. Таким образом, в других точках останова макет столбца упадет до 3, 2 или даже 1.

Одна из вещей, которые я нашел, что прекрасно работает, это добавление :after псевдоэлемент для оболочки с заданной шириной, которая заполнит пустое пространство. Проблема в том, что он недостаточно динамичен и не будет работать должным образом, если у меня будет другое количество сообщений, чем то, которое я планировал.

Например: если у меня есть 2 сообщения, каждое с шириной 25%, а затем псевдоэлемент с шириной 50%, все выглядит великолепно. Когда у меня есть 3 сообщения, это не так здорово, потому что 50% псевдоэлемента теперь должно быть 25%. Наконец, если есть 4, мне не нужен псевдоэлемент вообще.

Я пытаюсь использовать некоторые селекторы SASS, но по какой-то причине, когда я пытаюсь нацелить родителя с помощью :after элемент, он нацелен на что-то еще вверх по дереву DOM.

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .entry:nth-child( 2 ):last-of-type {
        :after & {
            content: "";
            flex-grow: 0;
            width: 50%;
        }
    }
    .entry:nth-child( 3 ):last-of-type {
        :after & {
            content: "";
            flex-grow: 0;
            width: 50%;
        }
    }
}

В этот момент я ожидал, что элемент:after будет нацелен на родительский класс "content", но это не так. Я также не думал о том, как настроить его так, чтобы он был более динамичным и мог обрабатывать несколько строк. Я думаю, я мог бы просто сделать математику и сделать что-то вроде .entry:nth-child( 3n+4 ):last-of-type {}, но я еще даже не добрался там.

Answer 1

CSS-Grid может показаться более подходящим, чем flexbox.

.content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
  margin-bottom: 1em;
}

.red .entry {
  background: red;
}

.blue .entry {
  background: blue;
}

.green .entry {
  background: green;
}

.entry {
  height: 50px;
}

<div class="content red">
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
</div>

<div class="content blue">
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
</div>

<div class="content green">
  <div class="entry"></div>
  <div class="entry"></div>
</div>

Answer 2

Вот сетка в Code Pen

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

<div class="post-grid>
    //while loop here
    <div class="each-post">
        <img src="<?php get_the_post_thumbnail() ?>">
        <h2><?php get_the_title() ?></h2>
        <p><?php get_the_excerpt() ?></p>
    </div>
    // end loop here
</div>