Как правильно сверстать данную секцию?

Question

[Soceine]

Не так давно начал учиться верстать сайты и возникла проблема.
Нужно чтобы каждый cards__item фиксированно имел свою позицию, т.е. по центру были расположены и друг под другом.
При удалении любого блока cards__item другие должны стоять на своем месте, как и стояли до этого.
Вот мой код https://jsfiddle.net/Soceine/9jz1426v/7/

А вот и сама задача, чтобы было более понятно, что требуется.


P.S. Просьба не кидаться камнями. Я не так давно окунулся в мир веб-разработки.
Заранее сорри, если вопрос уже был.По крайней мере я не нашел (мб и плохо искал).

Comments

[Вадим]

То есть если удалить элемент с заголовком Два вида внимания - то остальные, такие как Recall должен остаться там же, где и стоял до удаления первого блока?
И причём тут flexbox? Какой у Вас вопрос именно к флексам?

[Soceine]

Вадим, Вопрос переделал.
В самой секции 5 элементов и в будущем будет естественно больше. Посмотрите на 5 элемент на скрине, он стоит ровно под блоком "Recall". Мне нужно точь в точь сверстать, но к сожалению вся пачка "card__item" у меня плывет по сайту. Можете глянуть код, там увидите то, что у меня получилось.

[Вадим]

Soceine, сыграйте в https://flexboxfroggy.com/#ru

[Вадим]

Вадим, Soceine, ну и карточки должны быть одного размера по ширине для этого.
Сопряженная тема: сетки в веб интерфейсах

[Soceine]

Вадим, Т.е. нужно cards__item дать определенную ширину?

[Вадим]

Soceine, я просто с телефона уже, не могу детальнее объяснить или посмотреть код. Позже если будет ещё актуально - отпишусь

Answer 1

[Александр Шипин]

использовать стили

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 920px;
  margin: auto;
}

.cards__item {
  display: flex;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

<div class="cards">
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
<div>

Смотртеть подробнее туту

Comments

[Soceine]

Спасибо за ответ, но к сожалению сказали использовать строго display: flex;

[Александр Шипин]

.cards {
 display: flex;
 justify-content: flex-start;
 flex-wrap: wrap;
}
.cards__item {
 width: 20%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
}

Семантика без изменений.

<div class="cards">
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
<div>

Расположение картинки и заголовка карточки по центру

.cards__pic {
 display: flex;
 justify-content: center;
 align-items: center;
}
.cards__tile {
 text-align: center;
}

сделать отступ у текста

.cards__description {
 text-indent: 20px; // отступ в 20 пикселей первой строки
}

либо, если нужно по центру

.cards__description {
 text-align: center;
}

[Soceine]

alexshipin, Спасибо большое. Вы мне очень помогли.

[Александр Васильев]

Soceine, используйте в следующий раз display table. Этот камень в тех, кто «сказали»