Дизайн-Кладовка: Модульные Сетки. Что такое гибкая сетка в адаптивной верстке

Адаптивный дизайн – это процесс распределения шаблона таким образом, чтобы вся информация первой важности оказалась в первую очередь видна пользователям, которые используют устройства с маленькими экранами. Большинство дизайнеров выбирают сеточные шаблоны, так как этим видом шаблонов довольно просто управлять на многих устройствах.

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

Что такое гибкие сетки?

Важно узнать о предназначении гибких сеток до того, как начать думать о дизайнах. Вряд ли можно найти лучшее объяснение слову fluid (гибкий), чем написано на Wikipedia.

«Флюид (от лат. fluidis - «текучий») - вещество, поведение которого при деформации может быть описано законами механики жидкостей»

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

Важность гибких сеток

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

Мобильные устройства становятся все меньше и меньше в размере, и люди предпочитают использовать их в повседневной работы. С другой стороны, настольные мониторы становятся больше, и разрешения отображения повышаются. Так что, разрабатывая адаптивный дизайн, мы не можем планировать его только для маленьких устройств. Преимущество гибких сеток заключается в том, что мы можем выставить параметр max-width, и тогда шаблон будет отлично отображаться даже на большом экране, так как здесь все указывается в процентном соотношении.

Как работают гибкие сетки

Мы привыкли разрабатывать дизайн при помощи фиксированных сеток и 960-пиксельной сеточной системы. Затем шаблоны стали адаптивными, в которых мы используем разное количество пикселей при разных размерах экрана. Все было основано на пиксельных шаблонах дизайна. Теперь пришло время создавать дизайны на базе процентных соотношений, и такие дизайны называются гибкими.

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

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

Генераторы и системы гибких сеток

Не так-то просто создать гибкую сетку с нуля, так это на это требуется довольно много времени и усилий. Следовательно, гораздо лучше будет воспользоваться CSS Grid Framework или Grid Generator в качестве основы нашего шаблона. Предлагаем вашему внимаю несколько бесплатных CSS сеточных систем и генераторов.

Большинство CSS сеточных платформ предоставляются с расширенными свойствами, и многие из них были протестированы во всех современных браузерах. Цель данного руководства заключается в том, чтобы вы полностью поняли, что такое гибкие сетки. Итак, вам следовало бы сгенерировать гибкую сетку, которая позволит вам изучить основы гибких сеток.

Затем скачайте гибкую версию CSS-файла. Теперь откройте его в вашем любимом текстовом редакторе или осуществите поиск Grid >> 12 Columns. Нижеприведенный код отображает контент раздела Grid >> 12 Columns.

Container_12 .grid_1 {
width:6.333%;
}

Container_12 .grid_2 {
width:14.667%;
}

Container_12 .grid_3 {
width:23.0%;
}

Container_12 .grid_4 {
width:31.333%;
}

Container_12 .grid_5 {
width:39.667%;
}

Container_12 .grid_6 {
width:48.0%;
}

Container_12 .grid_7 {
width:56.333%;
}

Container_12 .grid_8 {
width:64.667%;
}

Container_12 .grid_9 {
width:73.0%;
}

Container_12 .grid_10 {
width:81.333%;
}

Container_12 .grid_11 {
width:89.667%;
}

Container_12 .grid_12 {
width:98.0%;
}
Как видно, container_12 – это основной контейнер. Каждый ваш элемент в дизайне должен быть внутри контейнера с классом container_12. Затем ширина в процентном соотношении задается классам.grid_1 , .grid_2 … .grid_n. Гибкие сетки создаются при помощи колонок, которые расцениваются как гибкие колонки. Когда размер экрана изменяется, ширина этих колонок также пропорционально изменяется в соответствии с родительским контейнером.

В нашей сетке есть 12 гибких колонок. Итак, давайте взглянем на то, как колонки расположены в нашем шаблоне.

Код для верхнего раздела приведен ниже. Вы можете проверить скачанные файлы, если вам нужно больше информации.

Fluid Grid with Fluid Columns




1
1
1
1
1
1
1
1
1
1
1
1

2
2
2
2
2
2

Каждый набор компонентов содержится внутри элемента с классом container_12. Внутри контейнера мы можем использовать класс grid_n для создания гибких колонок с указанной шириной. Используя grid_1 мы можем задать 1/12 от исходной ширины сетки, а grid_2 даст нам 2/12 от исходной ширины.

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

Вложенные гибкие колонки

Когда у вас есть CSS-платформа, вам будет довольно просто создать сетку с гибкими колонками. Но ведь не все дизайны будут такими же простыми, как пример, который мы показали ранее. Иногда нам нужно будет создавать колонки и строки внутри других колонок и рядов. Давайте посмотрим, как мы можем создавать вложенные гибкие колонки при помощи CSS-файла, который мы сгенерировали ранее.

Шаблон, представленный выше, содержит 2 ряда. Первый ряд разделен на 2 раздела, состоящих из 6 колонок, и каждый раздел будет снова разделен на 4 раздела из 3 колонок.

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

Nested Fluid Columns

3
3
3
3




3
3
3
3

4
4
4




4
4
4




4
4
4





Сначала мы создаем основные контейнеры, как мы делали это в предыдущем разделе. Внутри колонки нам нужно создать еще один контейнер с классом container_12 для вложенных колонок. Теперь нам нужно еще 12 колонок внутри 6 основных колонок. Затем 12 под-колонок можно разделить так, как потребуется. Теперь вы должны понимать, как создавать гибкие сетки и как работать с вложенными колонками. Давайте перейдем к дальнейшему изучению гибких сеток.

Дизайн поверх гибких сеток

Многие дизайнеры, которые только начинают, думают, что применение адаптивной CSS-платформы сделает их дизайн адаптивным. К сожалению, адаптивный дизайн – это не так просто. Гибкие сетки адаптируются к изменениям в размере окна браузера или устройства. Пока вы тщательно не продумаете дизайн, у пользователей будут проблемы при просмотре вашего контента на меньших по размеру устройствах, если вы будете использовать гибкие сетки.

Посмотрите на изображение, приведенное ниже.

Так шаблон на гибкой сетке, о чем говорилось в предыдущих частях руководства, будет отображаться на маленьких экранах. Здесь у нас просто сеточные колонки без нужных данных. Даже в этом случае номер 1 не отображается так, как нужно. Когда дело дойдет до реального контента, у нас получится сплошное месиво. В данном сценарии нам нужно выставить ширину колонок для того, чтобы предоставить лучший опыт взаимодействия с пользователями.

Вы можете использовать CSS media queries для настройки ширины колонок для разных экранов. В вышеприведенном сценарии вы можете удвоить ширину колонки и оставить 6 колонок вместо 12, чтобы пользователям было легче читать контент. Так что постарайтесь не зависеть всецело от гибкой сетки в адаптивном дизайне.

Тестирование гибких сеток

Теперь, когда мы рассказали вам об основах гибких сеток, мы можем перейти к разработке простого демо с jQuery для того, чтобы протестировать нашу гибкую сетку на разных размерах экрана. Сначала нам нужно создать шаблон страницы и навигацию, как показано ниже.

Fluid Grid Tester





Desktop
Tablet Landscape
Tablet Portrait
Mobile Landscape
Mobile Portrait








Наша тестовая страница будет иметь базовый HTML-шаблон с jQuery. Элемент с id device_panel будет содержать навигацию для стандартных устройств вроде настольных ПК, мобильных и планшетов. Как только по ссылке будет произведен клик, запустится функция changeGrid, с типом устройства в качестве параметра.

В нижнем разделе у нас будет iframe, который будет использоваться для загрузки нашей гибкой сетки. Гибкая сетка будет содержаться в файле media_query.html. Теперь давайте взглянем на функцию changeGrid.

Function changeGrid(device){
if(device == "desktop"){
$(".wrapper").css("width","960px");
}
if(device == "tab_lan"){
$(".wrapper").css("width","768px");
}
if(device == "tab_pot"){
$(".wrapper").css("width","600px");
}
if(device == "mob_lan"){
$(".wrapper").css("width","480px");
}
if(device == "mob_pot"){
$(".wrapper").css("width","320px");
}
}
Как только функция будет запущена, она проверит устройство при помощи введенного параметра. Затем она изменит ширину.wrapper (IFRAME) на стандартную ширину устройства. Далее у нас будет возможность увидеть работу гибких сеток на маленьких экранах.

Гибкая сетка, использованная внутри файла media_query.html, будет похожа на примеры, которые мы обсуждали ранее. Вы можете использовать файлы из демо для оформления кодов. У вас должно получиться нечто похожее на то, что на изображении.

*

Внимание! У вас нет прав для просмотра скрытого текста.

Подытожим

Гибкие сетки позволяют вам создавать адаптивные дизайны, которые подходят при работе с разными размерами экранов. Сложность разработки гибкой сетки может быть снижена за счет существующих CSS-платформ. Вы не можете всецело зависеть от гибких сеток, если хотите предоставить пользователям идеальный адаптивный дизайн. Выстраивайте гибкую сетку только по требованиям к вашему дизайну, и старайтесь предоставить лучший опыт взаимодействия своим пользователям. Надеемся, что из этого руководства вы вынесли для себя что-нибудь полезное!

Надеюсь, что этот список кому-нибудь поможет. Я попытался собрать наиболее интересные системы.

Сетка Bootstrap

Google Material Design. Большинство дизайнеров сталкивались с этой системой, очень удобной по своей сути. Руководства хорошо описаны. Одно из самых передовых решений на рынке. Но, к сожалению, заставляет использовать системы Google, которые не прекращают их изменять;)

Это система сеток, основанная на свойствах дисплея. flexboxgrid.com

Старая система блочной верстки HTML, теперь она используется редко, хотя она дает достаточно интересную возможность для изменений.
Лично мне, довольно сложно работать с ней.

Существует множество примеров, когда вы берете за основу принципы bootstrap. Это система из 6 или 12 колонок, и дизайнеры переделывают ее. Измените размер отдельных блоков, сделайте их неравными и так далее. Сейчас это тренд.

Custom modular grid based HTML 100px / 200px / 300px / 400px Crow Grid Framework

Crow v3.0 – умный сеточный фреймворк

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

Human Interface Guidelines

Принципы дизайна – Краткое описание –
Узнайте о разработке приложений для iOS.developer.apple.com

Очень мало сказано о модульных системах, но их принципы очень интересны. Разумеется, в первую очередь подходит для iOS.

Human Inter
Сетка Human Inter

Human Inter довольно своеобразная система, которая подойдет далеко не каждому проекту. В ее основе лежат принцип и Витрувианский человек. При использовании одним из наиболее важных аспектов является горизонтальная линия. Это сетка, в основе которой лежит bootstrap.
Если вы хотите увидеть правила и руководства пользователя для этой системы, напишите мне на email: ivantsanko 11@ gmail . com

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

C приходом адаптивных сайтов полностью изменился и процесс разработки. Раньше все макеты дизайна сдавались как отдельный этап и направлялись далее по производственной цепочке. Сейчас же при разработке сайта с адаптивной модульной сеткой необходимо плотное взаимодействие между дизайнером и front-end разработчиком на большинстве этапов.

Инструменты и генераторы макетов Tiny Fluid Grid Generator

Удивительно простой в использовании генератор css-файлов для разметки страницы. Для того чтобы скачать модульную сетку, необходимо задать количество колонок, расстояние между колонками, максимальную и минимальную ширину.

Grid Pak

Генератор адаптивной модульной сетки. Разработан компанией Good Work .

Сетки и расширения Photoshop Modular Grid Pattern

Приложение для веб дизайнеров, которое легко и быстро поможет создать модульную сетку для Adobe Photoshop. Так же имеется возможность скачать расширение для Photoshop.

Плагин для Photoshop, помогающий в создании направляющий.

Responsive Photoshop Template

Одна из лучших модульных сеток для Photoshop, помогающая в создании адаптивного дизайна.

960px Grid Templates

960 pixel - подборка шаблонов модульных сеток для Adobe Photoshop и Fireworks в диапазоне от 3 до 16 колонок.

Responsive Grid PSD

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

Golden Grid - фреймворк на основе CSS. Использует правила «золотого сечения». Изменяет количество колонок от 4 до 18, в зависимости от размера экрана.

Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения. Bootstrap использует самые современные наработки в области CSS и HTML. Интуитивно простой и в тоже время мощный инструмент, повышающий скорость и облегчающий разработку web-приложений.

Простой шаблон для создания адаптивной модульной сетки. Адаптирует дизайн в любое количество колонок.

Адаптивная модульная сетка, позволяющая ПК и мобильному устройству одинаково хорошо отображать содержимое сайта. Columnal рекомендуется применять для быстрого прототипирования Ваших проектов.

Skeleton - фреймворк на основе CSS и JavaScript. Адаптивная сетка основана на многим знакомой 960 пиксельной сетке, однако ее легко адаптировать под разные устройства.

PURE

Набор адаптивных CSS модулей, которые могут быть использованы для любого веб-проекта. Прекрасный инструмент, позволяющий применять модули для любого проекта, даже если вы уже используете в разработке другие фреймворки или вам просто нужен только один модуль. Настоятельно рекомендует обратить внимание на данный фреймворк, если вы занимаетесь разработкой адаптивных сайтов.

YAML

Yaml - СSS Framework от немецких разработчиков для создание адаптивных кроссбраузерных сайтов. Как и любые другие CSS фреймворки, он создан для облегчения жизни front-end разработчика. В нем можно создать шаблон как для простого, так и для сложного сайта. Yaml хорошо документирован, имеется множество примеров, которые пригодиться при верстки.

960 grid - классика среди CSS фреймворков, очень полезный инструмент в основе которого лежит ширина каркаса в 960 пикселей. Grid 960 - СSS фреймворк, позволяющий разработчикам быстро разрабатывать прототипы дизайна. Являются прекрасным инструментом для создания макетов. Система создаст каркас шириной 960 пикселей и все блоки, созданные в этом каркасе будут соответствовать определённым пропорциям.

Разработка веб-сайтов

Любому верстальщику, перед которым встала очередная задача по вёрстке адаптивного макета, нужны сетки. В большинстве случаев берётся старый добрый bootstrap, и в html-ке начинают появляться div-ы с классами вида col-xs-6 col-sm-4 col-md-3 . И вроде бы всё хорошо и быстро, но в данном подходе часто возникает множество подводных камней. В данной статье мы рассмотрим эти подводные камни, и закидаем тухлыми помидорами рассмотрим мою поделку для беспроблемных сеток.

ПроблемыНестандартные сетки

Итак, у нашего верстальщика очень мало времени, макет горит, всё надо сделать вчера. Поэтому, он берёт для основы популярный css-фреймворк bootstrap, и начинает свою работу. И тут, в середине работы, он вдруг натыкается на блок баннеров "5 в ряд". Все, кто работал с bootstrap знает, что его сетка по умолчанию 12-кратная, поэтому 5 колонок в ряд стандартной бутстраповской сеткой ну никак не сделаешь. Да, конечно, в бутстрапе можно собрать произвольную сетку, но это время терять, качать зависимости, собирать less-ки (а мы, допустим, пишем на sass).

Может подключить какую-нибудь библиотеку для настраиваемых сеток? В целом это хороший выход, единственный минус данного подхода, что практически все из них рассчитаны либо на долгое и нудное написание @media(min-width:){} , либо генерируют свой набор классов, с кучей, наверняка не нужных col15-xs-offset-3 , которые попадут в итоговую css-ку.

Поэтому, с большой вероятностью, верстальщик просто пропишет все стили вручную (там, в принципе, не так много писать).

Очень часто в стандартной бутстраповской сетке не хватает дополнительных брейкпоинтов, т. е. есть xs, sm, md, lg - все они до ширины 1200px. А как же большие мониторы? Какой-нибудь брейкпоинт xl на 1600px так и просится в стандартный набор. Но его опять же нет, и возникают те же варианты решения, что и в предыдущем пункте. А ведь контрольных точек может быть очень много - 320, 360, 640, 768, 992, 1200, 1600, 1900..

Избыточность и многословность

И тут мы плавно подходим к следующей проблеме. Представьте, что вам нужно прописать для каждой сетки свои размеры блока, тогда у вас получится что-то типа этого:

Не слишком ли много? Добавьте сюда возможные pull/push и visible/hidden и тогда можно смело начинать сходить с ума. А ведь все эти классы прописаны в css, представьте сколько нужно прописать классов в css для всех комбинаций 60-кратной сетки!

Отделение стилей от разметки

Любой верстальщик знает, что inline-стили - это плохо. Так зачем мы пишем в классы разметки то, что касается стилей? col-xs-6 , visible-sm и не дай бог text-right - это всё стили, и, если надо будет вносить правки в уже натянутую на вёрстку, обязательно возникнет проблема, что верстальщику придётся просить backend-щика поменять col-sm-6 на col-sm-4.

Перекрытие ненужных стилей

Часто css-фреймворк подключают весь только ради сеток и пары мелких функций, что вытекает впоследствии в избыточном сбросе стилей и двойном размере итогового css. Например, подключается весь bootstrap.min.css, а потом весело и задорно убираются тенюшки и закруглённые уголки у.btn, .form-control и тому подобного, включая:hover, :focus, :first-child . В итоге, вместо помощи, фреймворк начинает мешать. Не говоря уже о часто не нужных фичах, по типу.glyphicon . Конечно, опять же можно собрать bootstrap из того, что нужно, но это опять время.

Чужие стандарты и code-style

Допустим, верстальщик изучил БЭМ и начал его применять. Но необходимость использовать bootstrap диктует свои исключения - в нём все классы пишутся через дефис, не следуя принципам БЭМ. И тут возникает проблема выбора - либо смириться с мешаниной в названиях классов (btn-block disabled component__btn component__btn_disabled), либо всё-таки выкинуть bootstrap.

Устаревшие методы

Как известно, сетки в bootstrap 3 основаны на float-ах. Что часто вызывает проблемы, одна из наиболее частых - различная высота блоков, в результате которой красивая сетка "ломается". Хватит использовать float-ы не по назначению, уже практически вымерли все браузеры, которые не умеют flexbox!

Susy! - это выход?

В поиске решения всех перечисленных выше проблем, я на замечательный сеточный фреймворк Susy! , в целом очень хороший. Но мне не хватало скорости, т. к. susy! предлагал описывать колонки для каждого брейкпоинта отдельно:

.col { @media (min-width: 768px) { @include gallery(4 of 12); } @media (min-width: 1200px) { @include gallery(3 of 12); } }

То есть susy! предполагает, что брейкпоинтами вы будете заниматься самостоятельно. Кроме того, susy! сам не пишет за вас display: flex для, строк, вам нужно их не забывать прописывать самостоятельно. Отступы между колонками в нём задаются только относительные (сделать фиксированные в пикселях не получится). Также, он совсем недавно научился flex, а до этого он строил сетки на float и:nth-child() . В общем, susy! это хорошо, но хотелось бы скорости и лёгкости описания сеток для всех брейкпоинтов, как это было с bootstrap.

Поиск других сеточных систем также не давал особо результата - все либо идут по пути susy!, забывая про breakpoints, либо идут по пути bootstrap, предоставляя набор сгенерированных классов для руления сетками в html.

Велосипедостроение

Итак, решено было написать что-то своё, в результате родился fast-grid . Он также, как и susy, построен на sass. Какие же главные преимущества он предоставляет по сравнению с другими решениями, в частности, с susy!? В первую очередь скоростью за счёт меньшего количества кода, возьмем стандартный bootstrap пример:

1 2

С помощью fast-grid такую сетку очень легко описать:

@import "~fast-grid/fast-grid"; .row { @include grid-row(); } .col { @include grid-col(6 4 3 2); }

Давайте теперь пройдёмся по нашим недостаткам, и увидим как fast-grid решает все эти проблемы.

Нестандартные сетки

@import "~fast-grid/fast-grid"; .cols { $grid: (gap: 5px); @include grid-row($grid); &__item { @include grid-col(12 6 null (1 of 5), $grid); } } Необходимость своего набора breakpoint-ов @import "~fast-grid/fast-grid"; .cols { $grid: (breakpoints: (xxs: 0px, xs: 360px, sm: 640px, md: 960px, lg: 1200px, xl: 1600px), columns: 60); @include grid-row($grid); &__item { @include grid-col((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $grid); } } Избыточность и многословность / Отделение стилей от разметки

fast-grid это сеточный фреймворк для использования в css, а не в html на основе сгенериронных наборов классов. Благодаря этому разметка становится отделена от стилей, что благотворно отражается на дальнейшей поддержке. Также благодаря этому нет необходимости генерировать кучу вспомогательных классов (.col-xs-push-4 и т. п.), которые по большей части не используются.

Перекрытие ненужных стилей

Так как fast-grid - это набор mixin-ов, сам он не генерирует ни одного правила в css. Поэтому тут вы не столкнётесь с тем, что фреймворк стилизует элементы так как вам не надо. Да и вообще, это только сетки, и ничего больше.

Чужие стандарты и code-style

fast-grid - это mixin-ы, которые вы должны использовать внутри ваших классов, с такими наименованиями, которые вы сами предпочитаете. Любите БЭМ? Не вопрос!

Устаревшие методы

По умолчанию используется flexbox, что открывает множество возможностей и решает проблемы классических float. Например, можно легко менять порядок колонок.

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

Можно было бы конечно этого добиться с помощью pull/push для float, но это очень костыльно.

Заключение

В целом, поставленная для меня задача была выполнена - теперь сетки для меня больше не вызывают никаких проблем, и вёрстка идёт быстро и легко. Больше о возможностях fast-grid вы можете почитать в репозитарии и рассмотреть на примерах:

Вы всё ещё используете bootstrap? Тогда мы идём к вам!

Теги:

• css
• sass
• grid

Добавить метки

В наши дни для всего есть фреймворки, и кажется, что только вы разберетесь с одним, как на смену ему придет другой. Это особенно касается CSS фреймворков для адаптивной сетки, и каждый называет себя “самым лучшим”. Такой переизбыток информации вводит в замешательство.

Давайте вернемся на шаг назад, сделаем глубокий вздох, и спросим себя: действительно ли мы собираемся использовать все 24 варианта, и миллион их комбинаций, которые нам предоставляет “Этот Наикрутейший Фреймворк”? Зачастую нам нужно простое, гибкое решение, с ограниченным количеством вариаций, с кодовой базой, которую мы можем в любой момент расширить. Я хочу рассказать о четырех техниках реализации CSS сеток, каждая из которых легко расширяется. Вот эти четыре способа:

Адаптивная сеточная разметка №1 (с использованием отрицательных отступов)

Адаптивная сеточная разметка №2 (с использованием box-sizing: border-box)

Адаптивная сеточная разметка на основе табличного отображения

Адаптивная сеточная разметка на основе flexbox

Я упрощу описание этих способов, и буду использовать минимальное количество простого и понятного CSS. Для каждого способа будет представлена демонстрация на CodePen.

Общий CSS

Перед тем, как углубиться в описание каждого метода, давайте взглянем на общие стили, которыми мы будем использовать во всех примерах. Я буду использовать объявление box-sizing: border-box для всех элементов документа, а также добавлю класс.clearfix для очистки плавающих блоков. Вот наш базовый CSS:

/* сбрасываем свойства */ *, *:before, *:after { box-sizing: border-box; } .clearfix:after { content: ""; display: table; clear: both; }

Способ 1: используем отрицательные отступы

Данный способ основан на использовании отрицательных отступов для создания блоков сетки с фиксированным отступом между блоками. Размер отрицательного отступа варьируется от позиции блока в сетке, а расстояние между блоками остается постоянным. Давайте посмотрим на разметку:

/* сетка */ { margin-bottom: 20px; } :last-child { margin-bottom: 0; } { } @media all and (min-width: 768px) { /* all cols margin */ { margin-right: 20px; } :last-child { margin-right: 0; } /* делаем колонки адаптивными */ .col-1-2 { float: left; width: 50%; } .col-1-4 { float: left; width: 25%; } .col-1-8 { float: left; width: 25%; } /* 2 span rows */ .row-2 { padding-left: 20px; } .row-2 :first-child { margin-left: -20px; } /* 4 span rows */ .row-4 { padding-left: 60px; } .row-4 :first-child { margin-left: -60px; } /* 8 span rows */ .row-8 { padding-left: 60px; } .row-8 :nth-child(4n+1) { margin-left: -60px; } .row-8 :nth-child(5n-1) { margin-right: 0; } .row-8 :nth-child(6n-1) { clear: both; } } @media all and (min-width: 1200px) { /* adjust width */ .col-1-8 { float: left; width: 12.5%; } /* 8 span rows */ .row-8 { padding-left: 140px; } /* reset these... */ .row-8 :nth-child(4n+1) { margin-left: 0; } .row-8 :nth-child(5n-1) { margin-right: 20px; } .row-8 :nth-child(6n-1) { clear: none; } /* and add this */ .row-8 :nth-child(1) { margin-left: -140px; } }

Как видно, в рамках условий медиазапросов фиксированное значение отступа (назовем его x) умножается на количество колонок в строке минус 1 (n-1), и такой отступ применяется к строке слева. У каждой колонки, кроме последней, задан фиксированный отступ справа (x). А первой колонки в строке задан отрицательный отступ (n-1)*x

Недостатки и ошибки

Необходимость в некоторых расчетах, к тому же способ становится непрактичен при увеличении количества колонок. К тому же при увеличении количества шагов (количество градаций медиазапросов, например на 1 колонку на строку, 4, 8…), нам необходимо сбрасывать CSS, и приходится использовать множество математических вычислений.

Еще одна интересная ошибка всплывает, когда у нас много плавающих элементов. Общая сумма отступов в какой-то момент может скомбинироваться, и элементы перенесутся на новую строку. Это можно видеть в случае с 8 колонками. Если поменять условие последнего медиа-запроса на минимальную ширину, меньше 1200px, то можно наблюдать данный баг в действии. Помните об этом. Но у этого способа есть и свои преимущества.

Преимущества и использование на практике

Настоящая прелесть этого способа заключается в создании комбинаций сетки фиксированного/переменного размера. В качестве примера давайте представим область основного содержимого переменной ширины, и дополнительную боковую область фиксированной ширины. Наш HTML-код может выглядеть примерно так:

Primary Lorem ipsum dolor... Secondary Lorem ipsum dolor...

А CSS - так:

/* разметка */ .primary { margin-bottom: 20px; } @media all and (min-width: 600px) { .container { padding-right: 300px; } .primary { float: left; padding-right: 60px; width: 100%; } .secondary { float: right; margin-right: -300px; width: 300px; } }

А вот и демонстрация кода в действии на CodePen :

Способ 2: используем box-sizing: border-box

Этот способ использует всю силу box-sizing: border-box . Так как это свойство позволяет добавлять элементу поля без того, чтобы их значение влияло на общую ширину элемента, мы все еще можем добиться гибкой сетки с фиксированными “отступами”. Но здесь вместо использования свойства margin , мы будем использовать внутренние поля, которые будут играть роль отступов между элементами сетки.

Разметка:

Здесь мы обойдемся без головокружительной математики, так что наш CSS будет действительно простым. А вот и он, с возможностью разметки до 8 колонок:

/* сетка */ .row { margin: 0 -10px; margin-bottom: 20px; } .row:last-child { margin-bottom: 0; } { padding: 10px; } @media all and (min-width: 600px) { .col-2-3 { float: left; width: 66.66%; } .col-1-2 { float: left; width: 50%; } .col-1-3 { float: left; width: 33.33%; } .col-1-4 { float: left; width: 25%; } .col-1-8 { float: left; width: 12.5%; } }

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

Расширяем этот способ:

Скажем, вы бы хотели, чтобы элементы.col-8 сначала разбивались по 4 в строку, а затем по 8. Это довольно просто реализовать, если немного подумать. Для вышеприведенной разметки наш CSS будет выглядеть следующим образом:

@media all and (min-width: 600px) { .col-1-8 { float: left; width: 25%; } .col-1-8:nth-child(4n+1) { clear: both; } } @media all and (min-width: 960px) { .col-1-8 { width: 12.5%; } .col-1-8:nth-child(4n+1) { clear: none; } }

Способ 3: используем табличное отображение

Этот способ реализует старое-доброе табличное поведение, но не ломая семантику или структуру. В этом методе видимые элементы отображаются по-умолчанию как блоки. Но при определенных размерах строки сетки становятся таблицами, а столбцы становятся ячейками таблицы. Давайте взглянем на разметку - она похожа на аналогичную из второго способа, но тут нам не нужен.clearfix:

И, соответственно, CSS:

/* сетка */ .row { margin: 0 -10px; margin-bottom: 10px; } .row:last-child { margin-bottom: 0; } { padding: 10px; } @media all and (min-width: 600px) { .row { display: table; table-layout: fixed; width: 100%; } { display: table-cell; } /* set col widths */ .col-2-3 { width: 66.66%; } .col-1-2 { width: 50%; } .col-1-3 { width: 33.33%; } .col-1-4 { width: 25%; } .col-1-8 { width: 12.5%; } }

Этот метод может показаться запутанным, но в нем есть преимущества. Для начала, мы не нарушаем семантику использованием традиционных таблиц, и нам не нужно подчищать плавающие блоки. Колонки одинаковой высоты - легко. Комбинация фиксированных колонок и колонок переменной ширины? Нет проблем. Табличный вариант отображения привносит свои проблемы, и из всех четырех способов он мой самый нелюбимый. Несмотря на то, что в некоторых случаях он является неплохим вариантом.

Способ 4: Flexbox

Последний способ, который я опишу, использует модуль flexbox. Согласно MDN :

CSS3 Flexible Box, или flexbox - режим макета, предоставляющий возможность размещать элементы на странице так, что они ведут себя предсказуемо на различных размерах экрана и различных устройствах.

Flexbox предлагает множество различных возможностей, дающих нам мощный арсенал различных вариантов компоновки элементов. Сделать модуль flexbox адаптивным проще простого. Как и ранее, наша разметка выглядит так:

А теперь посмотрим на наш новый CSS:

/* grid */ .row { display: flex; flex-flow: row wrap; margin: 0 -10px; margin-bottom: 10px; } .row:last-child { margin-bottom: 0; } { padding: 10px; width: 100%; } @media all and (min-width: 600px) { /* set col widths */ .col-2-3 { width: 66.66%; } .col-1-2 { width: 50%; } .col-1-3 { width: 33.33%; } .col-1-4 { width: 25%; } .col-1-8 { width: 12.5%; } }

В данном случае для строк необходимо выставить свойство display в значение flex , а также указать свойство flex-flow. Полное определение и описание этих свойств доступно в документации MDN к flexbox . Для медиа-запроса мы просто меняем ширину колонок, а flexbox делает за нас остальное.

Заключение

Мы рассмотрели 4 способа создания адаптивных сеток на CSS, каждая со своими достоинствами и недостатками. Не существует абсолютного способа реализации того или иного действия, и я часто ловлю себя на том, что возникают ситуации, когда один способ подходит лучше другого, или мне нужно комбинировать несколько вариантов. Способы 1 и 2 - мои любимые, и я частенько использую их в своих проектах (основная разметка по методу 1, а адаптивные сетки по методу 2).

Как упоминалось ранее, третий способ имеет свои преимущества, но я предпочитаю использовать табличные макеты только тогда, когда это строго необходимо. Способ 4 прекрасен, и я жду не дождусь дня, когда я смогу перенести его на все свои проекты. Flexbox набирает обороты, но он поддерживается только в IE10 и выше. Для него есть полифиллы, но я предпочитаю обходиться без них. Хотя и сегодня есть сценарии, в которых flexbox будет превосходным решением (например, в мобильных браузерах, где нет IE).

Каждый из этих способов легко масштабируем и расширяем. Применяя представленные идеи вы легко можете настроить свой собственный адаптивный макет с нужным размещением для элементов сетки с минимальным количеством CSS. Модуль CSS сеток на подходе, но пройдет еще некоторое время, покуда мы сможем его использовать. Надеюсь, вам понравилась статья, и вам теперь не так страшно использовать CSS сетки.