У сегодняднем уроці ми поговоримо про створення сітки з колонками однакової висоти в незалежності від заповнювання ційних різним кількістю вмісту. Чесно зізнаюся це моя найболючіша тема, і як перфекціоніста вона мені просто не дає спокійно спати по ночах.

Як ви знаєте існує багато рішень такого завдання, від підгонки контенту під певні параметри довжини, до програмного огрніченія символів або підрізування за все, що виходить за межі заданого блоку як в ютюбе наприклад. Мені якщо чесно жоден з них не до душі.

Вібірая як иструмента для побудови сітки флекс бокс, нам не потрібно буде йти на подібні компроміси. FlexBox дозволяє створити гнучку сітку яка сама буде подстраіватся під наше вміст. Контейнери Flex обчислюють простір, доступне всередині сітки, що дає нам велику гнучкість з контентом, дозволяючи зробити, що щось схоже на це:

Я створив контейнер ul з купою елементів li всередині. Кожен елемент списку містить деякі елементи контенту, такі як <img>, <a>, <h2> і <p

<Ul class = "list"> <li class = "list-item"> <h2> Title </ h2> <img src = "http://baconmockup.com/250/200" alt = ""> Lorem ipsum dolor sit amet, consectetur adipisicing elit ... <a href="#"> Link </a> </ li> <li class = "list-item"> <h2> Title </ h2> Lorem ipsum dolor sit amet , consectetur adipisicing elit ... <a href="#"> Link </a> </ li> <li class = "list-item"> <h2> Title </ h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit ... <a href="#"> Link </a> </ li> </ ul>

Все, що необхідно для створення контейнера flexbox, це display: flex; Я додав display: flex; На батьківський елемент ul (.list), щоб управляти його дочірніми елементами (.list-items).

.list {display: flex; flex-wrap: wrap; }

Тепер давайте додамо деякі медіа-запити. Мій макет буде починатися з однієї колонки на рядок, поки розмір екрану не досягне 40em. Потім розмістимо по два елементи на рядок до тих пір, поки розмір екрану не досягне 60em, потім макет переключиться на три колонки в рядку.

@media all and (min-width: 40em) {.list-item {width: 50%; }} @Media all and (min-width: 60em) {.list-item {width: 33.33%; }}

Я додав display: flex; До елементів списку, щоб кожен елемент li розтягувався по вертикалі. За замовчуванням Flex розтягує елементи по вертикалі, тому колонки можуть бути однаковими по висоті. Тепер це дає можливість управляти дочірніми елементами, дозволяючи мені закріпити посилання в нижній частині кожного повідомлення.

.list-item {display: flex; padding: 0.5em; width: 100%; }

Ну і нарешті display: flex; Застосовуємо до .list-content, щоб я міг стилізувати <p> всередині нього. Оскільки елементи flex розміщуються в рядку за замовчуванням, я вказав напрямок, яке повинно бути стовпцем.

.list-content {display: flex; flex-direction: column; background-color: #fff; padding: 1em; width: 100%; } .List-content p {flex: 1 0 auto; }

See the Pen Flexbox list grid by mbogrov ( @mbogrov ) on CodePen .