Как расположить карточки по сетке?

Question

[Bolekovich]

Всем доброго дня суток! Как можно расположить вывод карточек по сетке?

function updateDom(data){

    const topAnimeRes = document.getElementById('topAni_result');

    topAnimeRes.innerHTML = data.top
        .map(anime => {
            if(anime.episodes == null) {
                anime.episodes = "выходит";}
        return `
        <div class="card text-white bg-dark m3" style="width: 18rem;">
        <img src="${anime.image_url}" class="card-img-top" alt="">
        <div class="card-body">
        <center>
          <b><h5 class="card-title"> <b>${anime.rank} место </b> </h5>
          <h5 class="card-title">${anime.title} место</h5>
          <ul class="list-group list-group-flush">
          <li class="list-group-item">Оценка: ${anime.score}</li>
          <li class="list-group-item">Эпизодов: ${anime.episodes}</li>
          </ul>
          </center>
        </div>
      </div>
        `
    }).join("");
    }

Comments

[Алексей Дубровин]

В чём проблема выводить в сетку?

[Aricus]

За сетку отвечает grid.

[Ankhena]

Прочитать про гриды и флексы.
По дороге заглянуть в валидатор https://validator.w3.org/nu/
Потому что в разметке черти что написано.

К JS ваш вопрос вообще не имеет отношения.

Answer 1

[Arkadiy_Stepanov]

Используй flexbox для этого