Как прижать нижние колонки к низу родительского блока?

Question

[weranda]

Нужно сделать вот такой вид:


Надо, чтобы нижние колонки были вытянуты по самой нижней, т. е. чтобы не было пустых пространств.
Вот пример кода: https://codepen.io/uscms/pen/wBKarao

Comments

[imasdf]

каждому блоку одинаковую длину сделай, а то один больше, другой меньше + grid

[weranda]

imasdf, Так и должно быть. Разный контент по объему в блоках.

[imasdf]

weranda, у тебя все сломается. если ты в дальнейшем контент в блоках будет увеличиться. лучше задать фиксированную высоту. а если контент больше. то обрезается текст

[weranda]

imasdf, никакой фиксированной высоты быть не должно. Оно все должно тянуться.

[imasdf]

weranda, Ну ок, как хотите.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

[weranda]

imasdf, я писал ранее про высоту/длину:

ак и должно быть. Разный контент по объему в блоках.

Поэтому ваш вариант не работает должным образом — у вас все блоки в ряду одинаковой высоты, но они должны быть по высоте контента в них и липнуть к предыдущему в ряду. Прям как на скриншоте в вопросе.

[imasdf]

weranda,

.item:nth-child(8) {
  grid-row: span 2; /* Блок 8 занимает две строки */
}
.item:nth-child(9) {
  grid-row: span 2; /* Блок 9 занимает две строки */
}

+

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

[weranda]

imasdf, Ну, это уже слишком жесткий код, который не позволит иметь несколько блоков с разным количеством вложенных блоков. Надо что-то универсальное, не зависящее от количества блоков, объема контента в них, а также и от ширины.

[godsplan]

weranda, это называется masonry grid, можете погуглить. вариантов решения масса

[weranda]

godsplan, гуглил, яндексил. Прижатия к низу на «автомате» не нашел.

[Михаил Ливач]

а можно ли на гридах или флексах сделать так, чтобы количество элементов в строке было произвольным, а последний элемент занимал всю оставшуюся ширину?
(грид тут получается однострочный)

Answer 1

[Виктор Кожухарь]

К сожалению, без хака тут не обойтись. Но если получен результат, то кому какое дело? Берем волшебную палочку и достаём кролика из шапки. Сплошная иллюзия и никакого мошенничества.

Answer 2

[Hovhannes Varosyan]

Попробуй с помощью css grid обеденить две колонки

Comments

[weranda]

Как?

[Hovhannes Varosyan]

weranda, примерно вот так `

.container {
  display: grid;
  grid-template-columns: repeat(3,200px);
  gap: 20px;
  }
.item:nth-last-child(2), .item:nth-last-child(3) {
  grid-row: span 2;
}


.item {
    color: #111111;
    background-color: #3c4cc8;
  
}

Его нужно доработать для вашей задачи

[weranda]

Hovo_Varosyan, Не, так появляются пустые пространства у контейнеров, а их быть не должно — только у нижних.

Вот так они должны прижиматься к низу и друг к другу:

[Hovhannes Varosyan]

weranda, тебе нужно поработать с height у items и если правильно помню у grid есть методы для этого justify-content(мало работал с grid), или можешь попробовать через flex

[imasdf]

Hovo_Varosyan, если бы он сразу показал фото, что нужно сделать было б проще. Тут да, если данные статические и просто как украшение для сайта делать "хард код", т.е для каждого элемента своя ширина и высота, если динамически погружается, то тут уже сложнее, нужна логика на JS(глянь похожие сайты, пинтерест и т.д)

[Hovhannes Varosyan]

imasdf, в этом и проблема, решения много, но зависит от того что он хочет создать, если это те текстовые поля и они статические, то просто нужно поработать с grid (flex) и height, но если нужно каждый раз показывать что то оригинальный ... я согласен нужно поработать с JavaScript, если правильно помню то же самое есть и в Instagram

[weranda]

imasdf, там то же самое, что и в вопросе.

[Hovhannes Varosyan]

weranda, да но у тебя данные статический?

Answer 3

[Zokhan]

Через гриды растяни на два ряда нужные ячейки посредством модификатора класса

Comments

[weranda]

Видите на скриншоте крестики красные?

Вот этого быть не должно. Верхние блоки должны занимать высоту по содержимому контента, а они высоту всего ряда занимают.

[Zokhan]

Тогда первый ответ

[weranda]

Zokhan, Может быть, я что-то упустил, но тут нет ни одного подходящего под задачу ответа.