@eugene159

Возможно ли сверстать такое без Javascript?

Вот ссылка на codepen:
https://codepen.io/codepen_user_2020/pen/yLEQwJP

В верстке есть плитка с карточками из 2-ух строк по 3 карточки.

В каждой карточке есть несколько своих строк. Их высоту предсказать невозможно (она зависит от текста, а текст от значения в БД). Поэтому строго задать высоту какой-либо строки внутри карточки через CSS нельзя. Кроме синей строки. У нее всегда фиксированная высота - 18px.

Мне нужно, чтобы синяя строка (с текстом "Уровень") была на одном уровне у всех карточек в своей строке в плитке.

Прикладываю 2 картинки, должно получить что-то вроде этого.
Возможно ли это сверстать без JS?

638d2eddcd023231976793.jpeg
ИЛИ

638d2de9888f4071946880.jpeg
  • Вопрос задан
  • 155 просмотров
Пригласить эксперта
Ответы на вопрос 2
RAX7
@RAX7
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  grid-auto-flow: dense;
  grid-gap: 0 17px;
}

.grid-item {
  display: contents;
}

.grid-item:nth-child(n + 4) .grid-item-top {
  margin-top: 30px;
}

.grid-item:nth-child(3n + 1) .grid-item-top,
.grid-item:nth-child(3n + 1) .grid-item-bottom {
  grid-column: 1;
}

.grid-item:nth-child(3n + 2) .grid-item-top,
.grid-item:nth-child(3n + 2) .grid-item-bottom {
  grid-column: 2;
}

.grid-item:nth-child(3n + 3) .grid-item-top,
.grid-item:nth-child(3n + 3) .grid-item-bottom {
  grid-column: 3;
}
Ответ написан
imko
@imko
Senior Scratch Developer
Возможно конечно, разве что карточки придется расформировать. Обычная таблица или grid, где под зеленые блоки свой ряд, под желтые свой и так далее
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы