4 столбца имеют одинаковое содержимое, но содержимое второго столбца меньше, из-за этого «Заголовок» во второй/четвертой строке не находится на одном уровне между столбцами.< /p>
Чего я хочу?
Я хочу, чтобы содержимое всех столбцов было на одном уровне.
Фрагмент кода- p>
Код: Выделить всё
.grid-container {
display: grid;
gap: 12px;
grid-template-columns: repeat(5, 1fr);;
}
.grid-column {
background-color: #f5f5f5;
height: 430px;
border-radius: 10px;
box-sizing: border-box;
padding: 12px;
display: grid;
grid-auto-rows:auto;
}Код: Выделить всё
Heading
Heading
This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.
Heading
1.List 2.List 3.List
Heading
Heading
This div contains a very long word.
Heading
1.List 2.List 3.List
Heading
Heading
This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.
Heading
1.List 2.List 3.List
Heading
Heading
This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.
Heading
1.List 2.List 3.List
Heading
Heading
This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.This div contains a very long word.
Heading
1.List 2.List 3.List
Что я пробовал?
Я удалил гибкость и использовал Grid в соответствии с ниже вопроса stackoverflow, но он не сработал -
Как сделать элементы flexbox одинаковой высоты и/или начинаться в одной и той же точке
Подробнее здесь: https://stackoverflow.com/questions/791 ... ss-columns
Мобильная версия