Что такое гибкая сетка в адаптивной верстке? Руководство по разработке адаптивного веб-дизайна с помощью макетов с плавающей сеткой

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

Есть мнение, что подобные инструменты для создания сеток применимы только при создании сайта. Однако если отталкиваться от личного опыта, можно поспорить с этим. На данный момент я использую сетки при создании 99% проектов, включая неадаптивные сайты. Более того. На основе сеток я делаю множество других задач, например, баннеры или подобные малевалки.

Как это работает? Очень просто. Дизайнер указывает параметры для генерации заранее утвержденной всей командой разработчиков сетки. Далее скачивает изображение с отрисованными столбцами в формате PNG или PSD , и по полученным линиям выстраивает дизайн сайта. Верстальщик же, имея заранее готовый фреймворк, уже начинает верстать. Все это значительно ускоряет работу над сайтом как для дизайнера, так и для верстальщика.

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

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

Responsify.it

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

Grid Calculator

Мой любимый инструмент для создания модульных сеток , которым я регулярно пользуюсь. Это некий калькулятор , который мгновенно проинформирует, какой будет ширина колонки при определенных параметрах модульной сетки.Это очень удобно и полезно. Grid Calculator позволяет генерировать модульные сетки в формате PNG , векторные изображения и паттерны для Photoshop JSX

Modular Grid Pattern

Хороший генератор изображений с модульными сетками в формате PSD и PNG . Основным его отличием от большинства конкурентов является то, что он умеет выстраивать не только колонки, но еще и горизонтальные линии . Для определенных задач будет полезным инструментом. Например, облегчит работу в нудной отрисовке таблиц с данными при разработке дизайна сайта.

Продолжаем тему адаптивной верстки . Сегодня речь пойдет об одном из трех китов адаптивной верстки - макете на основе сетки (flexible gridbased layout). Два других – это и гибкие изображения (flexible images).

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

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

Чтобы применить к веб-странице модульную сетку следует использовать простую формулу пропорциональности:

target / context = result

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

Мы сверстаем его «резиновым». Но вот проблема: как задать ширину обоих блоков? Ведь если прописать ее в пикселях, то они уже не будут резиновыми. Значит, нужно использовать проценты, а не пиксели. Но позвольте, а какие значения писать-то? Все равно ведь нужно от чего-то отталкиваться.

Можно, конечно, прикинуть на глаз: контент занимает примерно 70% от общей ширины страницы, а сайдбар - 30%. Но правильный верстальщик никогда и ничего не прикидывает на глаз. Нам нужен точный размер.

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

660 / 960 = 0,6875
300 / 960 = 0,3125

Остается только перевести эти данные в проценты. Не сильно заморачиваясь, просто сдвинем запятую на два знака вправо. Получаем:

68,75%
31,25%

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

Из дизайн-макета мы знаем, что ширина этой узкой колонки 120 пикселей, а широкой 520. Как перевести эти числа в %? Опять же применить формулу пропорции. Но на этот раз мы в качестве context-а используем не всю ширину страницы, а ширину того блока, куда входят эти две колонки, то есть ширину контентной части, которая у нас составляет 660 пикселей. Делим:

120 / 660 = 0,1818
520 / 660 = 0,7878

В процентах получаем соответственно 18,18% и 78,78%

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

Content {
width: 68,75%; /* 660px / 960px */
}

Надеюсь, с этим не возникло сложностей. Поехали дальше!

Макет на основе сетки

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

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

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

Для чего вообще нужны эти модульные сетки?

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

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

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

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

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

Когда дело доходит до выбора сетки появляется множество вариантов. Ниже приведены (и не только), которые вы свободно можете использовать в своих проектах. Эти CSS-сетки помогут вам быстро создать прекрасный отзывчивый сайт. В конце статьи приведена таблица, в которой сравниваются описанные ниже сетки.

1. Skeleton

Skeleton представляет собой набор css-файлов, плюс PSD-шаблон для веб-дизайнеров. Эти файла, по замыслу авторов Skeleton, помогут вам создать отзывчивый макет. Скелетон также имеет сброс стилей, что удобно. По умолчанию скелетон основан на 960px сетке (под мониторы шириной 980px), блоки скелетона имеют фиксированную ширину; блоки подстраиваются под браузер за счет пространства вокруг сайта; при изменении окна браузера горизонтальный скролл не появляется.

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

2. Simple Grid

Если вы минималист, то данная сетка вам подойдет. Ширина сетки по умолчанию не превышает 1140px . По утверждению авторов сетки делать сайт с меньшей максимальной шириной неправильно. В отличие от skeleton simplegrid ведет себя отзывчиво и удовлетворяет концепции отзывчивого дизайна. Как уже говорилось, максимальная ширина сетки 1140px , но поменять это значение не составит труда, так как все блоки сетки заданы в процентах: вот что значит отзывчивый дизайн! В самом сss-файле медиазапрос всего один:
@mediahandheld, onlyscreenand (max-width: 767px) , что можно отметить как недостаток.

В принципе вещь удобная, но при разработке, скорее всего, придется доработать.

Simple Grid является основой для легкой сетки, при этом Simple Grid не является CSS-фреймворком. У Simple Grid отсутствуют стили для кнопок, таблиц, шрифтов и т.д. Simple Grid работает с двумя различными типами сеток. Есть сетка для контента, которая выглядит как

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

Настройки Simple Grid

Основные настройки Simple Grid схожи с любой другой сеткой. Для начала необходимо обернуть вашу сетку в div с классом grid . Если вы хотите, чтобы у сетки был отступ (padding) в 20px , добавьте класс grid-pad . Затем, исходя из ваших предпочтений по размерам сетки, добавьте нужные классы. Например, если вы хотите сетку с левой колонкой и основным блоком (для контента), воспользуйтесь следующим кодом:

HTML

Если вы хотите получить с 4 колонками (для контента), вы можете использовать такой код:

HTML

Первая колонка (для контента) у нашей сетки всегда делается плавающей относительно левого края блока-обертки. Если вы хотите сделать колонку плавающей относительно правого края, добавьте класс push-right .

На основе Simple Grid работают, например, css-tricks..

Статьи в тему:

• перевод статьи "Don’t Overthink It Grids" на habrahabr.ru - Сетки без заморочек

3. Profound Grid

Profound grid позволяет предельно точно отобразить макет в большинстве браузерах. Как они смогли добиться такого прогресса для отзывчивого макета? Profound grid использует отрицательные поля при вычислении размеров столбцов.

4. Griddle

Griddle (github.com/necolas/griddle) – это сетка для веб-дизайнеров ориентированных на современные браузеры (IE8+). Css-файл генерируется при помощи sass-функций и примесей. Применение свойств inline-block и box-sizing обеспечивают макету новые возможности по сравнению с макетами основанными на плавающих блоках. Недостатки: у сетки отсутствует css-файл, только sass; скачать пример нельзя; только sass.

5. Extra Strength Responsive Grids

Если вы чувствуете, что другие css-сетки ограничивают вас, если ваш приоритет это полный контроль над тем, как ваш отзывчивый макет адаптируется под различные экраны, если вы озабочены о наименованиях классов в вашем css, то, возможно, вам пригодится Extra Strength Responsive Grids .

6. Proportional Grids

Это css решение решает проблему, очень часто возникающую при масштабировании нашего макета, а именно: возникающие непропорциональные размеры желобов для различных областей просмотра. Пропорциональные сетки позволяют использовать фиксированные размеры для ваших желобов, в то же время оставляя возможность использовать резиновые столбцы (колонки).

Идея автора такова: автор использует свойство box-sizing , что позволяет создать фиксированные промежутки совместно с колонками. Расстояние между колонками одно и то же для каждой конкретной точки останова и зависит от базового размера шрифта.

7. Neat

Описание появится позже

8. csswizardry-grids

Описание появится позже

9. Dead Simple Grid

Описание появится позже

10. Responsive Grid System

Описание появится позже

Добро пожаловать в "Дизайн-кладовку"!

Меня зовут Андрей Гаврилов, и я рад приветствовать вас в моем новом шоу необычного формата.

Почему такое странное название? Кладовка - это место, где собирается все, что накопил человек, что для него дорого и определяет его как личность.

Давайте вместе каждую неделю складывать в нашу общую дизайн-кладовку один полезный навык, секрет или умение.

Модульные сетки

Эта статья написана в формате конспекта по материалам данного видео:

Сегодня мы разберемся с одним важнейшим вопросом в работе современного веб-дизайнера. Это модульные сетки. Меня ежедневно заваливают вопросами о том, какую сетку использовать? В каких случаях использовать 12 колонок, 14 колонок, 1170рх или 960рх, а может быть, 940рх?

Сегодня мы разберем все эти вопросы в одном простом уроке.

Поехали...

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

Breakpoint

Первое, что нужно знать - это о таком понятии как breakpoint. Возможно, вы даже о нем и не слышали. Это, так называемая, точка слома. Она характеризует переход сайта от одного состояния к другому, потому как сайт выглядит по-разному на мобильном, планшете или десктопе. Для этого, как раз и существует та самая точка слома «breakpoint», в которой дизайн сайта переходит от мобильного устройства к планшету, от планшета к маленьким десктопам, от маленьких к большим.

Чтобы увидеть на примере, что такое breakpoint, и как работает адаптивность, можно открыть любой сайт, который является отзывчивым (адаптивным). Перед вами мой личный сайт andrewgavrilov.me, можете зайти на него и точно также протестировать. На моем десктопе с разрешением 1600рх, сайт выглядит именно так.

Давайте откроем dev tools в Chrome на мониторе. Если вы не знаете, как его запустить, то обязательно погуглите, так как мне бы не хотелось сейчас отвлекаться на такие базовые моменты. Итак, открываем dev tools и смотрим, как выглядит наш сайт на различных устройствах. Этот инструмент позволяет нам тестировать, как будет выглядеть сайт на мобильных устройствах с разрешением 320рх, 375рх в длину и т.д. На маленьких десктопах мой сайт выглядит вот так.

На планшетах 768рх, dev tools нам показывает, что сайт выглядит так.

На больших мобильных устройствах, с разрешением 420рх пикселей в длину, сайт перестраивается, и именно здесь, между двумя данными разрешениями и происходит breakpoint.

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

Bootstrap

Как правило, у сайта существуют всего лишь 2 или 3 breakpoint. Давайте заглянем на сайт самого популярного framework для разработчиков.

Это стало сегодня настолько популярным, что является, по сути, стандартом. Все разработчики и верстальщики работают именно под данный framework. Я не буду вдаваться в детали и рассказывать, что это такое, скажу только, что именно этот framework ускоряет верстку, и у него есть свои технические характеристики. Поэтому считается нормой, даже стандартом, если вы разрабатываете свой дизайн под модульные сетки, которые соответствуют Bootstrap.

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

Перейдем на вкладку CSS и зайдем в раздел Grid System (колоночная система).

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

Bootstrap считает, что очень маленькие устройства - это телефоны с разрешением менее 768рх, поэтому в диапазоне от 0 до 768 мы готовим первый макет. Далее маленькие устройства - планшеты, у них разрешение больше, чем 768рх, но меньше, чем 992рх, далее от 992рх начинаются средние устройства (десктопы). А устройства, у которых разрешение больше, чем 1200рх считаются большими устройствами (большими десктопами).

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

Открою вторую тайну, которая вас успокоит - нет никаких норм. Если мы покрываем диапазон, к примеру, от 320рх до рх - вы сможете подготовить макет под 320рх, под 768рх, под 322рх, под 327рх.

Понимаете, в чем суть? Разницы нет никакой.

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

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

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

Вот шаблон для маленьких девайсов, которые больше, чем 768рх.

Средние устройства больше 992рх.

И большие, больше 1170рх.

Эту величину в макете я использую, что на 1170рх, что на 1200рх - неважно, потому что это ширина устройства, а не сетки. Т.е. сетка может быть любой под эту ширину устройства. Не заморачивайтесь и просто используйте эти сетки в своей работе.

Я использую, как правило, сетки extra small, small devices и large devices. Это три диапазона, которые я покрываю, и это две точки слома - переход от мобильных к планшетам, от планшетов к десктопам.

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

Работа с модульными сетками

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

Основные принципы такие: здесь есть такой слой, который я иногда скрываю, иногда показываю, но чаще он скрыт.

Синие полосы - это колонки, мы работаем в них. Между ними есть промежутки, в которые мы не имеем права залазить. Но мы туда входим, и я покажу в какие моменты. Главное, чтобы наш элемент никогда не начинался между двумя колонками,

Его край не может начинаться внутри промежутка, только внутри колонки. Идеальное состояние, когда элемент начинается у края какой-нибудь колонки.

Если у вас так получается, то это прекрасно. Но чаще всего, элементы не всегда удается привязать к краю, и начинаются споры о сложности при верстке, дополнительных движениях в коде.

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

Чтобы не быть голословным, я покажу небольшой пример, который снимет у вас большинство сомнений. Я подготовил стандартную картину, которую можно наблюдать в "шапке" любого сайта - логотип, строка с меню, телефон и любая кнопка.

Это расположение относительно модульной сетки абсолютно правильное. Здесь не совсем все идеально - меню оканчивается не у правого края колонки, телефон не начинается и не кончается у краев колонок, кнопка не доходит до края колонки. Представляете, если бы все использовали одинаковую сетку, и у всех была бы одинаковая длина элементов? Поэтому абсолютно нормально, когда у вас такая ситуация.

Проблема будет, если вы сделаете вот так:

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

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

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

В заключение

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

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

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

1. Адаптивная сеточная разметка №1 (с использованием отрицательных отступов)
2. Адаптивная сеточная разметка №2 (с использованием box-sizing: border-box)
3. Адаптивная сеточная разметка на основе табличного отображения
4. Адаптивная сеточная разметка на основе 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-код может выглядеть примерно так:

А 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 сетки.