Верстка блоку отзивов,как сделать так как на дизайне?

Question

[H1f3st]

Привет, у меня получилось сделать чтобы оно было адаптивно и тд но без пробела между этими блоками двумя, потому что я сделал вот так

<div class="boxForText">
        <div class="boxForTextElement">
          <div class="boxForTextUp">
            <p>No.</p>
          </div>
          <div class="boxForTextBottom">
            <p>1</p>
          </div>
        </div>
        <div class="boxForTextElement">
          <div class="boxForTextUp">
            <p>Date</p>
          </div>
          <div class="boxForTextBottom">
            <p>21 Nov 2022</p>
          </div>
        </div>
        <div class="boxForTextElement">
          <div class="boxForTextUp">
            <p>Nom</p>
          </div>
          <div class="boxForTextBottom">
            <p>Merry</p>
          </div>
        </div>
        <div class="boxForTextElement">
          <div class="boxForTextUp">
            <p>Agence</p>
          </div>
          <div class="boxForTextBottom">
            Tattly
          </div>
        </div>
        <div class="boxForTextElement">
          <div class="boxForTextUp">
            <p>Ville</p>
          </div>
          <div class="boxForTextBottom">
            Ajaccio
          </div>
        </div>
        <div class="boxForTextElement">
          <div class="boxForTextUp">
            <p>Rating</p>
          </div>
          <div class="boxForTextBottom">
            90.6
          </div>
        </div>
      </div>

и boxForText дал градиент,но между двома блоками есть отступ,не знаю как сверстать как на макете

Comments

[Сергей delphinpro]

Это же явная таблица. Как в вашем случае добавлять вторую, третью строку?
Построчно верстать нужно.

<div class="block">

  <div class="block-header">No.</div>
  <div class="block-header">Date</div>
  <div class="block-header">Nom</div>
  <div class="block-header">Agence</div>
  <div class="block-header">Ville</div>
  <div class="block-header">Rating</div>

  <div class="block-cell">1</div>
  <div class="block-cell">21 Nov 2022</div>
  <div class="block-cell">Merry</div>
  <div class="block-cell">Tattly</div>
  <div class="block-cell">Ajaccio</div>
  <div class="block-cell">90.6</div>

  <div class="block-cell">2</div>
  <div class="block-cell">21 Nov 2022</div>
  <div class="block-cell">Merry</div>
  <div class="block-cell">Tattly</div>
  <div class="block-cell">Ajaccio</div>
  <div class="block-cell">90.6</div>

</div>

.block {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  row-gap: 1rem;
}
.block-header {
  background: red;
}
.block-cell {
  background: lime;
}

[H1f3st]

Сергей delphinpro, спасибо

[H1f3st]

H1f3st, но дайте br:10px;и не будет работать)

[Сергей delphinpro]

H1f3st, ну а если подумать?
каждому шестому элементу начиная с первого левые верхний и нижний радиусы
каждому шестому элементу начиная с шестого - правые верхний и нижний.
nth-child

[Сергей delphinpro]

.block-header:nth-child(6n + 1),
.block-cell:nth-child(6n + 1) {
  border-radius: 10px 0 0 10px;
}
.block-header:nth-child(6n),
.block-cell:nth-child(6n) {
  border-radius: 0 10px 10px 0;
}

[H1f3st]

Сергей delphinpro, спасибо!

[imko]

Сергей delphinpro, я бы их в ряды обернул и им просто display: contents кинул

[imko]

Сергей delphinpro, отвязываемся сразу от количества айтемов в ряду в селекторах да и просто логичнее-читаемее

Answer 1

[Антон Романков]

Самое простое — таблицей, на мой взгляд