нужно расставить по 4 объекта на страницу

Question

пытался расставить объекты по 4 штуки, следующие должны переноситься на новую строку, но не получается, переносятся только последние 4 объекта код html

<div class="container">
    <?php foreach($info as $data): ?>
        <div class="item">
            <div class="b_ava">
                <img src="<?= $data['img']; ?>" class="ava">
                <h3 class="name"><?= $data['name']; ?></h3>
                <h3 class="name"><?= $data['performer']; ?></h3>
                <span class="name"><?= $data['rating']; ?></span>
            </div>
            
            <?php endforeach; ?>
        </div>
    </div>


.container{
    display: flex;
    position: relative;
    max-width: 2000px;
    max-height: 2000px;
    left: 300px;
    bottom: 500px;
}

.item{
    display: flex;
    flex-wrap: wrap;
    grid-gap: 70px;
}

.b_ava{
    width: 252px;
    height: 355px;
    background-color: #1d1c21;
    box-shadow: inset 0px 0px 4px 2px #1d1c21;
    border-radius: 20px;
}

.name{
    color: aliceblue;
    font-size: 18px;
    text-align: center;
    font-family: Gill Sans, sans-serif;
    padding-top: 10px;
}

.ava{
    position: relative;
    left: 33px;
    top: 25px;
    border-radius: 20px;
    width: 190px;
    height: 190px;
}

Answer 1

Вы конечного смотрите сами, но на мобильных 4 блока в ряд будет выглядеть мягко говоря не очень.

Рекомендую к прочтению вот эту статью - Building a Rock Solid Auto Grid за авторством Nils Binder

Ниже мой вариант на основе решения Нильса. Количество столбцов указано в переменной --columns

body,
html {
  margin: 0;
  width: 100%;
  min-height: 100dvh;
  background-color: #a1bdc6;
}

.grid {
  --columns: 4;
  background-color: lightblue;
  padding: 4em;
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(max(calc(100% / (var(--columns) + 1)), min(10rem, 100%)), 1fr));
  gap: 2em;
}

.item {
  background-color: white;
  min-height: 10rem;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

БЛОГ НА HUSL

нужно расставить по 4 объекта на страницу

Ответы (1 шт):