Создание div'ов появляются рядом при использовании al oop в wordpress

Question

Я хочу, чтобы 2 деления появлялись в одном ряду, а затем отображали следующие два в следующем ряду и так далее. Я использую php, а l oop для рендеринга элементов на экране, чтобы они отображались один под другим. Как мне сделать так, чтобы они отображались рядом?

Сейчас это выглядит так: снимок экрана с отображением

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

<?php $decadesFrontPage = new WP_Query(array(
          'posts_per_page' => 2,
          'post_type' => 'Decades',
      ));

      while($decadesFrontPage->have_posts()){
        $decadesFrontPage -> the_post(); ?>

        <div class="row">
          <div class="col-sm-6">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title"><?php the_title() ?></h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>

        </div>

      <?php } ?>

Answer 1

Используйте CSS сетку, с ней очень легко создавать такие макеты! https://www.w3schools.com/css/css_grid.asp

.grid-container {
  display: grid;
  grid-column-gap: 50px;
  grid-template-columns: 1fr 1fr;
}
.grid-item {
  background: blue;
  color: #fff;
  font-weight:bold;
  padding:20px
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

Answer 2

1. Переместите row и col за пределы l oop

2. Добавьте отображение inline-block на карту

3. Определить width для карточки

    <div class="row">
      <div class="col-sm-6">
<?php $decadesFrontPage = new WP_Query(array(
      'posts_per_page' => 2,
      'post_type' => 'Decades',
  ));


  while($decadesFrontPage->have_posts()){
    $decadesFrontPage -> the_post(); ?>

        <div class="card d-inline-block" style="width: 18rem;>
          <div class="card-body">
            <h5 class="card-title"><?php the_title() ?></h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>


  <?php } ?>
      </div>

    </div>