Когда дело доходит до выбора сетки появляется множество вариантов. Ниже приведены (и не только), которые вы свободно можете использовать в своих проектах. Эти 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 - Сетки без заморочек
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 
Описание появится позже
Всем привет! Сегодня мы поговорим про то, что такое grid systems(система сеток) или просто гибкие сетки в адаптивной верстке .
Сначала дадим определение тому, что такое Grid System .
Grid System - коллекция стилей, основанных на классах, которые позволяют пользователю контролировать макет страницы, используя систему строк и колонок.
Представим, что у нас есть страница блога. Она разделена на 2 колонки: слева основная часть, а справа - сайдбар. Давайте попробуем создать гибкую сетку для такой страницы.
Ну, для начала мы должны сделать хоть и элементарную, но html разметку.
Здесь у нас есть блок, который содержит всю страницу, в нем лежит блок с блогом, в котором лежат 2 блока: основная часть страницы и сайдбар.
Итак, вся наша страница будет размером 960px . Вся сетка разделена на 12 колонок по 69px . каждая. Часть для блога будет шириной 900px . Основная часть страницы будет 566px , сайдбар - 331px .
Вот, что мы получим в итоге
#page {
margin: 36px auto;
width: 960px;
}
Blog {
margin: 0 auto 53px;
width: 900px;
}
Blog .main {
float: left;
width: 566px;
}
Blog .sidebar {
float: right;
width: 331px;
}
Все бы хорошо, но, как вы можете видеть, все это статично, задано в пикселях. Мы же хотим, чтобы наша сетка меняла свои размеры в зависимости от того, на каком экране просматривается страница, следовательно, нам нужно все задать в процентах . Давайте это и сделаем.
Для этого есть все та же формула, что и для шрифтов
цель / контекст = результат
Переведем блок всей страницы из пикселей в проценты.
#page {
margin: 36px auto;
width: 90%;
}
90% выбрано по тому, что в таком случае у нас будут еще и отступы по краям по 5% . Однако вы можете выбрать другое значение.
Используем нашу формулу: 900 / 960 = 0.9357
Умножим результат на 100 , чтобы получить проценты, и пропишем в наш css .
Blog {
margin: 0 auto 53px;
width: 93.75%;
}
То же самое нужно сделать и с колонками, но заметьте, что контекст изменился. Т.к. колонки находятся внутри блока с классом .blog , то он и будет контекстом. Давайте посчитаем.
566 ÷ 900 = .628888889
331 ÷ 900 = .367777778
Переводим все в проценты и записываем в таблицу стилей.
Blog .main {
float: left;
width: 62.8888889%;
}
Blog .sidebar {
float: right;
width: 36.7777778%;
}
Вот и все! Теперь мы получили гибкую сетку и можем использовать ее при верстке.
Как видите, все очень просто. В основе гибкой сетки, как и гибкого шрифта, лежит все одна и та же формула, запомнив которую, вы сможете без проблем верстать адаптивные сайты.
Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните!
А у меня на этом все, спасибо за внимание и удачной адаптивной верстки!
Резиновая верстка позволяет представить весь контент в удобном для чтения на любых устройствах или размерах экранов виде.
Большинство дизайнеров использует для этого макеты с плавающей сеткой, так как с их помощью проще работать с различными типами устройств.
В этой статье мы рассмотрим плавающие сетки и их значение в адаптивном дизайне.
Что такое макеты с плавающей сеткой?Сначала нужно понять, что такое плавающие сетки. Лучшее определение жидкости дано в Википедии:
Жидкость представляет собой вещество, которое постоянно изменяется (смещается) при приложении к нему усилия.
В веб-дизайне, плавающей жидкостью будет наш дизайн или макет, а усилием — размер экрана или устройство пользователя. Независимо от того, каковы эти устройства или размер экрана, компоненты в плавающей конструкции будут смещаться, и приспосабливаться к среде пользователя.
Важность плавающих сетокДля определенных видов устройств мы должны задать ширину и высоту вручную. Так как при резиновой верстке сайта плавающие сетки смещаются в пределах размеров родительского контейнера, ограничительные параметры нужны для различных размеров экрана и устройств.
Мы не можем ориентироваться на определенные устройства. Преимущество плавающей сетки заключается в том, что мы можем задать максимальную ширину, и она будет работать на больших экранах с помощью параметров, заданных в процентах.
Как работают плавающие сеткиДля резиновой верстки CSS с фиксированной сеткой раньше использовали 960-пиксельную систему сеток. Адаптивность макета достигалась за счет использования различных размеров в пикселях для различных размеров экрана. Теперь настало время для создания макетов на основе процентных соотношений, которые известны как плавающие макеты.
В плавающих сетках мы определяем для конструкции максимальный размер макета. При этом сетка делится на определенное количество столбцов. Затем мы создаем каждый элемент с пропорциональными шириной и высотой, а не на основе размеров в пикселях. Всякий раз, когда изменяется устройство или размер экрана, ширина и высота элемента регулируется пропорционально размерам родительского контейнера.
Перейдем к более глубокому рассмотрению плавающих сеток, чтобы получить представление о том, как работают плавающие макеты.
Dusty Cartridge
Palantir.net
Dress Responsively
Создать плавающую сетку не так просто, для этого потребуется время и усилия. Поэтому разумно было бы выбрать в качестве основы для дизайна макета CSS-фреймворк сеток или генератор сеток.
Ниже приведен список бесплатных CSS систем и генераторов сеток для резиновой верстки на div :
- Variable Grid System ;
- Fluid Grids Calculator ;
- Fluid Grid by Bootstrap .
Большинство CSS-фреймворков сеток содержат встроенные интеллектуальные функции и были проверены во многих браузерах. Целью данного руководства является дать вам полное понимание создания адаптивной верстки и резиновой с помощью плавающих сеток.
Следовательно, было бы разумно создать плавающую сетку, на примере которой вы смогли бы понять принципы ее работы.
Я использую Variable Grid System , чтобы сгенерировать плавающую сетку в соответствии с установленными требованиями. Перейдите к демо-версии и измените значения переменных. Я буду использовать следующие значения:
- Ширина столбца – 60;
- Количество столбцов – 12;
- Ширина отступа – 20.
После этого скачайте плавающую версию файла 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 .
Вы можете загрузить демо-версию и изменить размер окна браузера, чтобы увидеть сетки с плавающими столбцами в действии.
Вложенные плавающие столбцыЕсли вы используете в html верстку резиновую с помощью CSS-фреймворков , то создавать сетки с плавающими столбцами несложно. Но не все проекты будут настолько простыми, как приведенный выше макет. Возможно, вам потребуется создать столбцы и строки внутри других элементов. Столбцы, содержащиеся в родительском столбце, называются вложенными столбцами. Давайте посмотрим, как создать вложенные плавающие столбцы с помощью файла CSS , который мы сгенерировали ранее.
Посмотреть демо-версию
Приведенный выше макет содержит две строки. Первая строка разделена на две секции из шести столбцов, и каждая из двух секций снова разделена на четыре секции из трех столбцов.
Аналогично вторая строка разделена на три секции из четырех столбцов, и каждая из трех секций также разделена на три секции из четырех столбцов. Таким образом, в сетках создаются вложенные столбцы. Давайте рассмотрим код приведенного выше макета:
Nested Fluid Columns 3 3 3 3 3 3 3 3 4 4 4 4 4 4 4 4 4
Сначала мы создаем основные контейнеры и столбцы, как мы это делали в предыдущем разделе. Внутри столбца нам нужно создать еще один контейнер с классом container_12 для вложенных столбцов. Теперь мы получаем еще 12 столбцов внутри основных шести. Затем двенадцать подстолбцов можно разделять по необходимости.
Конструкция в основе плавающей сеткиБольшинство начинающих дизайнеров думает, что использование CSS-фреймворка сделает макет адаптивным. К сожалению, создать резиновую верстку не так просто. Плавающие сетки будут адаптироваться к изменению окна браузера или устройства. Если вы тщательно не спланируете дизайн, у пользователей будут проблемы при просмотре контента на небольших устройствах.
Рассмотрим приведенный ниже экран:
Таким образом, плавающая сетка, рассмотренная в предыдущих разделах, будет отображаться на маленьких экранах. Это только столбцы сетки без соответствующих данных. Даже в этом случае число 1 не отображается надлежащим образом. Когда дело дойдет до вывода контента, это будет полный беспорядок. В этом случае нам нужно настроить ширину столбцов.
Вы можете использовать медиа-запросы CSS , чтобы настроить ширину столбцов для разных размеров экрана в резиновой верстке сайта. В приведенном выше сценарии можно удвоить ширину столбца и получить 6 столбцов вместо 12, чтобы обеспечить лучшую читаемость контента. Поэтому в адаптивных конструкциях не все зависит от плавающей сетки.
Тестирование плавающих сетокТеперь, когда мы рассмотрели основы построения плавающих сеток, перейдем к созданию простой демо-версии с использованием JQuery , чтобы протестировать плавающую сетку на различных размерах экрана. Сначала создадим макет страницы и панель навигации:
Fluid Grid Tester Монитор Планшет альбомная ориентация Планшет портретная ориентация Смартфон альбомная ориентация Смартфон портретная ориентация
Тестовая страница имеет базовый HTML-макет с JQuery . Элемент с ID device_panel будет содержать панель навигации для стандартных устройств: стационарные компьютеры, смартфоны и планшеты. После нажатия на ссылку будет вызываться функция changeGrid с типом устройства в качестве параметра.
В нижней части мы имеем iframe , который будет использоваться для загрузки плавающей сетки резиновой верстки CSS . Она находится в файле media_query.html . Теперь давайте посмотрим на функцию changeGrid .
Адаптивность на сайтах на сегодняшний момент, как правило, решается единственным способом:
- выстраиваем колонки для обычных разрешений (например более 960px);
- для средних разрешений колонки становятся «резиновыми»;
- для малых экранов сбрасываем float, после чего все ячейки следуют одна под другой.
Данный подход, когда css-класс определяется в пределах @media-условия, может быть использован для разных задач. Например в Semantic UI (один из лучших css-фреймворков), можно задать «tablet.only» или «mobile.only». Аналогично можно придумать «phone-hide» и «tablets-hide» - скрывать ячейку для разного вида устройств.
@media (max-width: 768px) and (min-width: 480px) { .col.tablets-hide { display: none; } } @media (max-width: 480px) { .col.phone-hide { display: none; } }
И HTML-разметка:
1 2 3 4
В скрываем 2-ю ячейку для мобильников, и 3-ю ячейку для средних экранов.
Как видите, управлять можно не только шириной ячеек, но и их видимостью.
Использование LESSЖелающие поэкспериментировать, могут скачать , где рассписаны классы для 12 колонок.
Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.
Задача сетки не только в том, чтобы поддержать эстетику, но и в том, чтобы сохранять контроль над процессом разработки, делать сам процесс гибким как для дизайнера и для разработчика. Сетка - это как хорошо упакованный рюкзак , который вы передаете разработчику, чтобы он смог им пользоваться с удобством и пониманием вашего видения проекта.
Прежде чем создавать сетку, нужно «исследовать рабоче поле» - сделать черновой макет страницы, найти ограничения и критические области, которые обязательно проявят себя на этапе детального проектирования. Это помогает свести абстрактное понимание задачи к конкретным целям. После этого можно приступать к настройке рабочей сетки в макете. Для этого нужно создать структуру из трех типов сеток - базовой , колоночной и дизайнерской .
Базовая сеткаБазовая сетка близка по свойствам и назначению к миллиметровой бумаге. Она нужна для создания удобной среды, которая позволит вам двигать мелкие детали макета не задумываясь и не беспокоясь о том, чтобы все расстояния между элементами были равны, единообразны.
Шаг сетки зависит от таких атомарных неделимых частиц, как радио-кнопка, чекбокс, базовый шрифт и высота строки, минимальное расстояние между видимыми блоками контента, например, между фотографиями в галерее или карточками товаров.
Базовая сетка должна сочетаться с колоночной. Дефолтные настройки Photoshop предлагают дизайнеру сетку с шагом в 10 px, что соответствует смещению объекта по горячей клавише shift, но не соответствует ни кеглю шрифта, ни логике построения колонок и отступов. 10 px - целое число, но не более того. В настройках сеток для мобильных платформ хорошим шагом можно считать 4 или 8 px. Здесь же шаг сетки должен ровно укладываться в высоту строки основного текста и не быть слишком мелким.
Колоночная сеткаДля лендингов, сайтов с карточной структурой, портфолио и галерей резиновая адаптация работает хорошо. Для крупных агрегаторов и классифайдов с большим количеством форм, полей ввода и мелких контролов резиновое масштабирование создает трудности. Оно тяжело поддается контролю и часто деформирует элементы, разрушает структуру: теряются ключевые данные из первой прокрутки (например реклама), элементы сползают на следующую строку, целостность текстовых блоков разрушается, формы становятся чрезмерно широкими, пользователь вынужден слишком долго прокручивать страницу.
В адаптивном дизайне нужно сохранять структуру макета и аккуратность подачи информации для всех разрешений, поэтому макеты следует делать для всех контрольных точек. При этом колонки сетки остаются статичными и добавляются по мере увеличения ширины экрана, а элементы меняют свое положение, подчиняясь колоночному ритму и точкам перехода, breakpoints . За таковые можно принять 640, 768, 960, 1024, 1280 и 1440. И для каждого разрешения экрана соответственно будет разное количество колонок.
Сколько колонок выбрать для сетки?
Колоночная сетка отвечает за горизонтальный ритм, и чтобы таковой возник, нужно выбрать соотношение ширины колонки и отступа, которое позволит легко менять положении более крупных блоков. Это возможно, когда в крупный блок помещается несколько колонок, например 3-4. Отступ в данном случае, это воздушное поле, в котором не следует размещать элементы. Это важно в том смысле, что отступ - это не еще одна направляющая
, по которой можно выравнивать элементы.
Соответственно, при выборе количества колонок нужно держать в уме, сколько прямоугольных модулей будет использоваться на странице. Например, будет галерея из шести фотографий с текстовыми описаниями, два крупных графика и три абзаца текста. Тогда число колонок должно быть кратно 2, 3 и 6. Подойдет число 12. Деление рабочей области в 960 px на 12 колонок с шириной отступов в 10, 12, 16, 15 и 20 px даст ширину колонок в 60, 64, 65, 68, 70 px. Таким образом получится несколько вариантов сетки, например сетка в 12 колонок с шириной колонки в 64 px и отступом в 16 px.
Почему число в 12 колонок привычно? Все современные мониторы работают в разрешениях начиная, как минимум, с 1024×768. Разбиение рабочей области 960 px на 12 колонок подходит более всего, так как хорошо делится на колонки и отступы, кратные 2. Исходя из этого можно выбирать число колонок и для других разрешений - 10 колонок для 768 px, 16 колонок для 1280 px и 20 колонок для 1440 px и более. По сути колонки прибавляются либо убавляются для каждого разрешения.
Если же отталкиваться от задачи построить сетку под баннерную рекламу, то нужно найти оптимальную ширину отступа и колонки, исходя из деления ширины баннера в 300 и 240 px. Из всех вариантов деления подходящими (совпадающими) размерами будут 10, 12, 15, 20. Баннерная реклама, как таковая, проходит через большинство сайтов, почти как полоса общественного транспорта, и мы мало можем влиять на нее. Но можно рассчитать колонки иначе и допустить незначительный выход баннера за пределы одной колонки по правому краю, но тогда сама сетка будет строиться на других модулях (например, на карточках товаров или видео-роликов). В этом случае следует на этапе дизайна лейаута продумать где на странице будет фиксированное положение баннеров, и какие элементы должны сопровождать эти баннеры, чтобы вместе создавать модуль, подчиняющийся сетке.
Дизайнерская сеткаДизайнеру нужно создать лейаут, который будет учитывать не только баннерную рекламу, но и другие не менее значимые элементы и типы контента: вертикальные постеры фильмов, квадратные музыкальные обложки, крупные фотографии, видео, статьи по десять штук в одном ряду и так далее. Лейаут может складываться из двух узких колонок по бокам и одной широкой по центру. Может из одинаковых колонок с широкими отступами, а может даже состоять из «плавающих» колонок (когда две, когда пять), но так, чтобы это становилось видимым за счет повторения компоновки материалов и вложение «меньшего в большее».
Существует множество фреймворков, CSS-сеток, и многие из них предлагают создавать высоты строки примерно в полтора раза большую, чем размер шрифта и вписывать в получившуюся линию все остальные строки текста. Например . Некоторые предлагают определять интервальное число и выставлять интрильяж для всех текстов кратный этому числу. Но в этом случае от части шрифтов придется отказаться. В качестве компромисса подойдет инструмент Grilover . Он отличается от других тем, что не просто регулирует высоту базовой строки шрифта, но и компенсирует слипание/расползание строк параметром Scale factor.
Использование сетки при передаче макетов в версткуСетку полезно передавать верстальщикам в виде отдельной спецификации. Вы можете не только приложить к основному джипегу дополнительный джипег с сеткой, но прописать на нем основные размеры - например шаг, отступ, ширину колонки, размеры шрифтов. Тогда соответствие вашего макета и верстки станет более точным, и контроль над разработкой и синхронизацией повысится с обеих сторон. Точно также как в мобильных интерфейсах существуют независимые пиксели (dp), так и в вебе это единицы rem. Вы можете создать разметку в пикселях или прописать ключевые элементы и расстояния в rem. Удобно когда шаг вашей сетки и rem кратен одному и тому же числу. Например, если шаг сетки 8 px, базовый шрифт - 16 px и rem равен 16 px, то размеры элементов и расстояния при кратности 4 будут становиться на сетку и иметь целое значение в rem. Это позволяет сразу видеть расстояния между элементами по шагам на сетке. Такие цельные значения без долгих расчетов можно получить наглядно, если воспользоваться Rem Калькулятором .
Полезные ссылки:О паттерне распознования текста и вертикальном ритме на Smash Magazine
Еще о сетке на teehan+lax
Grilover и Typecast
Статьи и примеры сеток на The Grid System
Пример поиска композиции для дизайнерской сетки с помощью модулей -
