От автора: всегда интересно создать свой адаптивный макет. В данной статье рассматривается метод, который можно использовать для контроля расстояний между колонками сетки. Для демонстрации я использую адаптивную галерею изображений.
Создание адаптивного макета
Прежде чем начать, предположим, что наша галерея на больших экранах выглядит как-то так:
На маленьких экранах (< 50em) галерея должна выглядеть так:
Разметка довольно проста:
|
1 2 3 4 5 6 7 8 9 10 |
<div> <a href="path-to-the-image"> <figure> <img src="path-to-the-image" alt=""> </figure> </a> <!-- ссылки ... --> </div> |
Как вы, наверное, уже знаете, для достижения желаемого результата мы возьмем преимущества из разных методов проектирования макетов. Перед тем, как начать рассматривать оба метода, давайте зададим изначальные условия (на картинке выше):
На средних и маленьких экранах я хочу двухколоночный макет (т.е. < 50em), а на больших экранах макет в 4 колонки (5em и выше).
Расстояние между колонками должно быть 8px.
Метод с использованием inline-block
Первым для создания галереи я использую метод display:inline-block. Рассмотрим код CSS ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
div { font-size: 0; } a { font-size: 16px; display: inline-block; margin-bottom: 8px; width: calc(50% - 4px); margin-right: 8px; } a:nth-of-type(2n) { margin-right: 0; } @media screen and (min-width: 50em) { a { width: calc(25% - 6px); } a:nth-of-type(2n) { margin-right: 8px; } a:nth-of-type(4n) { margin-right: 0; } } |
По умолчанию между inline-block элементами есть расстояние. Один из способов переписать это – установить размер шрифта родительского элемента в 0. Может также потребоваться сброс размера шрифта всех дочерних элементов (не обязательно в нашем случае).
На маленьких экранах у меня двухколоночный макет с расстоянием 8px между колонок. Ширина колонок вычисляется следующим образом:
Общее расстояние между колонками в одном ряду = 1*8px=>8px. Мы получили величину 8px, а не 16px, так как я удалил правый margin для каждой второй колонки на маленьких экранах.
Ширина каждой колонки = calc(50% — 4px). Значение 4px определено с помощью расчётов: Общее расстояние между колонками в ряду/ Количество колонок в ряду (8px/2=>4px).
На больших экранах у меня макет в 4 колонки с расстоянием 8px между ними. Ширина колонок вычисляется следующим образом:
Общее расстояние между колонками в ряду = 3*8px=>24px. И опять, мы получили 24px, а не 32px, потому что я удалил правый margin для каждого 4 столбца.
Ширина колонки равна calc(25% — 6px). Значение 6px получено простыми вычислениями: Общее расстояние между колонками в ряду / количество колонок в ряду (24px/4=>6px).
CodePen демо
Метод на Flexbox
Метод выше работает довольно неплохо, однако есть некоторые недостатки. Для демонстрации одного из недостатков предположим, что у наших изображений есть подписи. Рассмотрим немного обновленную разметку:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div> <a href="path-to-the-image"> <figure> <img src="path-to-the-image" alt=""> <figcaption>Some text here</figcaption> </figure> </a> <!-- другие ссылки ... --> </div> |
На скриншоте новая версия нашей галереи для больших экранов:
CodePen демо
Результат уже не такой привлекательный, так как ячейки сетки имеют разную высоту. С помощью flexbox это можно исправить. Flexbox позволяет решить множество распространенных проблем с макетами (например, расстояние по умолчанию между inline-block элементами). Для подключения данного метода мне всего лишь требуется обновить CSS родительского элемента (flex контейнера):
|
1 2 3 4 |
div { display: flex; flex-wrap: wrap; } |
Теперь на всех экранах галерея должна отображаться, как задумано (высота колонок должна быть одинаковой). Ниже показано, как галерея выглядит на больших экранах:
CodePen демо
На данном этапе нам осталось прояснить всего одну вещь. Flexbox использует свойство justify-content, которое выравнивает элементы сетки вдоль главной оси текущего flex контейнера. Однако заметьте, что данное свойство не задает значение, с помощью которого можно создать желаемую нам галерею. К примеру, значение space-between показано в макете ниже:
А значение space-around сделает с нашей галереей следующее:
В обоих случаях два последних элемента на нижнем ряду отображаются некрасиво. CSS код данного метода:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
div { display: flex; flex-wrap: wrap; justify-content: space-between; /* или space-around */ } a { display: inline-block; margin-bottom: 8px; width: calc(50% - 4px); } @media screen and (min-width: 50em) { a { width: calc(25% - 6px); } } |
В этом примере я не добавлял свойство margin-right к элементам сетки. Я сделал это, потому что в зависимости от значения свойства justify-content браузер сам позаботится о расположении элементов сетки внутри контейнера. CodePen демо
Заключение
В данной статье были рассмотрены два метода определения точных расстояний между колонками в адаптивной сетке изображений. В принципе, метода inline-block вполне хватает, однако с помощью flexbox сделать это намного проще и результат будет более надежным, особенно вместе с функцией calc(). Если вы знаете другие способы решения данной проблемы, пишите о них в комментариях.
Автор: George Martsoukos
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
