Создание гибкой сетки с колонками равной высоты — независимо от количества содержимого. FlexBox — оптимальное решение, которое не требует обрезки контента или программных ограничений.
HTML-структура
Основа — контейнер ul с элементами li:
CSS для контейнера и элементов
.list {
display: flex;
flex-wrap: wrap;
}
.list-item {
display: flex;
padding: 0.5em;
width: 100%;
}
.list-content {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 1em;
width: 100%;
}
.list-content p {
flex: 1 0 auto;
}
Медиа-запросы для адаптивности
Макет адаптируется: одна колонка → две колонки → три колонки. Применение flex-direction: column позволяет расположить элементы вертикально и закрепить ссылки внизу блока.
@media all and (min-width: 40em) {
.list-item {
width: 50%;
}
}
@media all and (min-width: 60em) {
.list-item {
width: 33.33%;
}
}