Своя сетка для адаптивной верстки. Что такое гибкая сетка в адаптивной верстке? Вложенные плавающие столбцы
Сайта или его верстке не может обойтись без модульной сетки с колонками , по которым выстраивается блочная структура сайта. Сетки используют как бывалые дизайнеры, так и начинающие. Последним просто необходимо брать на вооружение данную подборку с онлайн-инструментами для создания модульных сеток PSD и , так как они значительно облегчат работу над созданием сайта и сделают его более правильным с технической точки зрения, особенно если речь идет о каком-то информационном ресурсе, например, новостном сайте, блоге или портале, где основной упор идет на качественную подачу информации.
Есть мнение, что подобные инструменты для создания сеток применимы только при создании сайта. Однако если отталкиваться от личного опыта, можно поспорить с этим. На данный момент я использую сетки при создании 99% проектов, включая неадаптивные сайты. Более того. На основе сеток я делаю множество других задач, например, баннеры или подобные малевалки.
Как это работает? Очень просто. Дизайнер указывает параметры для генерации заранее утвержденной всей командой разработчиков сетки. Далее скачивает изображение с отрисованными столбцами в формате PNG или PSD , и по полученным линиям выстраивает дизайн сайта. Верстальщик же, имея заранее готовый фреймворк, уже начинает верстать. Все это значительно ускоряет работу над сайтом как для дизайнера, так и для верстальщика.
Если говорить о верстке по модульной сетке, то для этого уже создано множество css . Наиболее распространенный - это Bootstrap . Если же проект не на , то некоторые из предложенных инструментов способны генерировать вместе с изображением сетки еще и целый свой фреймворк с зашитыми в него кастомизированными параметрами, которые были указаны на первом этапе.
Итак. К вашему вниманию набор инструментов для создания модульных сеток PSD и CSS , которые значительно облегчат создание сайта.
Responsify.it
Простой и удобный инструмент для создания адаптивной сетки . Генерирует как PNG файл для разработки дизайна, так и css стили для верстальщика. Большим плюсом данного сервиса является то, что можно сразу посмотреть готовый результат. Внизу есть переключатель разрешений экрана. С его помощью можно увидеть, как перестраиваются колонки сайта на разных устройствах.Grid Calculator
Мой любимый инструмент для создания модульных сеток , которым я регулярно пользуюсь. Это некий калькулятор , который мгновенно проинформирует, какой будет ширина колонки при определенных параметрах модульной сетки.Это очень удобно и полезно. Grid Calculator позволяет генерировать модульные сетки в формате PNG , векторные изображения и паттерны для Photoshop JSX
Modular Grid Pattern
Хороший генератор изображений с модульными сетками в формате PSD и PNG . Основным его отличием от большинства конкурентов является то, что он умеет выстраивать не только колонки, но еще и горизонтальные линии . Для определенных задач будет полезным инструментом. Например, облегчит работу в нудной отрисовке таблиц с данными при разработке дизайна сайта.
Когда дело доходит до выбора сетки появляется множество вариантов. Ниже приведены (и не только), которые вы свободно можете использовать в своих проектах. Эти 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
Описание появится позже
Надеюсь, что этот список кому-нибудь поможет. Я попытался собрать наиболее интересные системы.
Сетка 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
Как создать адаптивную сетку
Шаг 3: создание контейнера сетки
У каждой сетки есть контейнер, определяющий её максимальную ширину. Как правило, я называю его.l-wrap . Префикс.l- означает layout (раскладка). Я использую такое именование с тех пор, как изучил SMACSS , методологию Джонатана Снука .
L-wrap {
max-width: 1140px;
margin-right: auto;
margin-left: auto;
}
Примечание: для лучшей доступности и адаптивности я настоятельно рекомендую использовать вместо пикселей относительные единицы измерения вроде em или rem . В примерах я использую пиксели, потому что они проще для понимания.
Шаг 4: расчёт ширины колонок
Помните, что мы используем флоаты для вёрстки колонок и отступов? С флоатами мы можем использовать только пять CSS -свойств для создания колонок и отступов, в случае с флексами, их немного больше.
- width
- margin-right
- margin-left
- padding-right
- padding-left
Если вы помните, при использовании CSS -сеток разметка выглядит примерно так:
Из этой разметки понятно, что сетка имеет всего три колонки. Также видно, что для создания отступов нет дополнительных
- Мы создаём колонки с помощью свойства width ;
- Мы создаём отступы с помощью свойств margin или padding .
Думать о колонках и отступах одновременно сложно, поэтому давайте для начала представим, что делаем сетку без отступов.
Эта сетка будет выглядеть примено так:
Трёхколоночная сетка без отступов.
А теперь нужно произвести несколько математических вычислений. Мы знаем, что сетка имеет максимальную ширину в 1140 px , значит ширина каждой колонка - 380 px (1140 ÷ 3).
Three-col-grid .grid-item {
width: 380px;
float: left;
}
Пока всё хорошо. Мы сделали сетку, которая отлично работает на вьюпортах больше 1140 px . К сожалению, всё ломается, когда вьюпорт становится меньше.
Сетка ломается, когда вьюпорт меньше 1140px
Из-за этого мы не можем использовать пиксели. Нам нужна единица измерения, которая зависит от ширины контейнера: это проценты. Давайте зададим ширину колонок в процентах:
Three-col-grid .grid-item {
width: 33.33333%;
float: left;
}
Код выше задаёт простую резиновую трёхколоночную сетку без отступов. Колонки меняют свою ширину пропорционально ширине окна браузера.
Три колонки без отступов.
Прежде чем двигаться дальше, нужно уточнить одну вещь. Когда все дочерние элементы контейнера плавающие (им задано свойство float), высота контейнера обнуляется. Это явление называется схлопыванием флоатов . Контейнер ведёт себя так, будто в нём нет дочерних элементов:
Схлопывание флоата. Изображение с CSS Tricks
Чтобы это исправить, нам нужен клиар-фикс. Он выглядит так:
Three-col-grid::after {
display: table;
clear: both;
content: "";
}
Если вы используете препроцессор вроде Sass , вы можете сделать примесь, чтобы использовать этот код удобно в разных местах:
// Clearfix
@mixin clearfix {
&::after {
display: table;
clear: both;
content: "";
}
}
// Usage
.three-col-grid {
@include clearfix;
}
Мы разобрались с колонками. Следующий шаг - отступы.
Шаг 5: определение положения отступов
Пока мы только знаем, что их можно реализовать с помощью свойств margin и padding . Но какое из них следует выбрать?
Сделав несколько попыток, вы быстро поймёте, что есть четыре возможных способа как сделать эти отступы: внешние, margin и внутренние, padding . Отступы могут быть расположены:
- С одной стороны, внешние;
- С одной стороны, внутренние;
- Равномерно с обеих сторон, внешние;
- Равномерно с обеих сторон, внутренние.
Четыре возможных способа создать колонки и отступы.
Здесь начинаются сложности. Вам нужно по-разному рассчитать ширину колонок в зависимости от используемого метода. Рассмотрим эти методы один за другим и посмотрим на разницу. Не торопитесь, пока читаете.
Метод 1: внешние односторонние отступы
Используя этот метод, вы создаете отступы с помощь margin . Этот отступ будет расположен слева или справа от колонки. Вам решать, какую сторону выбрать.
В рамках этой статьи, давайте предположим, что вы задаете отступы справа. Вот что вы будете делать:
Grid-item {
margin-right: 20px;
float: left;
}
Затем пересчитываете ширину колонки как на картинке:
Внешние односторонние отступы.
Как вы видите на картинке выше, 1440 px это три колонки и два отступа.
И тут появляется проблема… Нам нужно, чтобы колонки были описаны в процентах, но в то же время отступы зафиксированы на ширине 20 px . Мы не можем делать вычисления с двумя разными единицами измерения одновременно!
Это было невозможно раньше, но возможно сейчас.
Вы можете использовать CSS -функцию calc для сочетания процентов с другими единицами измерения. Она на лету извлекает значение процентов для выполнения вычислений.
Это значит, что вы можете задать ширину в виде функции, и браузер автоматически рассчитает ее значение:
Grid-item {
width: calc((100% - 20px * 2) / 3);
}
Это круто.
После получения ширины колонки, вам нужно удалить последний отступ у крайнего правого элемента сетки. Вот как это можно сделать:
Grid-item:last-child {
margin-right: 0;
}
Чаще всего, когда вы удаляете последний отступ у крайнего правого элемента, вы также хотите задать ему обтекание по правой стороне для предотвращения ошибок субпикселного округления, из-за которых ваша сетка переносит последний элемент на новую строку. Это происходит только в браузерах, которые округляют пиксели.
Ошибка субпикселного округления может сломать сетку, вытолкнув последний элемент на следующую строку.
.grid-item:last-child {
margin-right: 0;
float: right;
}
Фух. Почти готово. И ещё одна вещь.
Наш код хорош только в том случае, если сетка содержит лишь одну строку. Но он не справляется, если строк с элементами больше, чем одна 😢
Код не справляется, если строк больше, чем одна.
Нам нужно удалить правый внешний отступ у каждого крайнего правого элемента в каждой строке. Лучший способ это сделать - использовать nth-child:
/* Для 3-колоночной сетки */
.grid-item:nth-child(3n+3) {
margin-right: 0;
float: right;
}
Это всё, что нужно для создания односторонних внешних отступов. Вот CodePen , чтобы вы сами поиграли:
Примечание: свойство сalc не работает в IE8 и Opera Mini. Смотрите другие подходы, если вам нужно поддерживать эти браузеры.
Метод 2: внутренние односторонние отступы
Как и с внешними односторонними отступами, в этом методе требуется разместить отступы на одной из сторон колонки. Предположим, что вы снова выбрали правую сторону.
Grid-item {
padding-right: 20px;
float: left;
}
Односторонние отступы с использованием внутренних отступов
Обратили внимание, что ширина отличается от предыдущего метода? Мы переключили свойство box-sizing в border-box . Теперь width рассчитывается, включая в себя padding .
В этом случае, две из трёх колонок имеют бо́льшую ширину, чем последняя, что в конечном итоге приводит к причудливым расчётам и делает CSS трудным для понимания.
Я предлагаю даже не продолжать с этим методом. Всё обернётся действительно страшно. Пробуйте на свой страх и риск.
Метод 3: внешние разделённые отступы
В этом методе мы разделяем отступы на две части и размещаем по половине с каждой стороны колонки. Код выглядит примерно так:
Grid-item {
margin-right: 10px;
margin-left: 10px;
float: left;
}
Затем пересчитываем ширину колонки как на картинке:
Разделение внешних отступов.
Как мы узнали ранее, рассчитать ширину колонки можно с помощью функции calc . В этой ситуации мы отнимаем три отступа от 100%, прежде чем делить ответ на три для получения ширины колонки. Другими словами, ширина колонки будет calc((100% - 20px * 3) / 3) .
Grid-item {
width: calc((100% - 20px * 3) / 3);
margin-right: 10px;
margin-left: 10px;
float: left;
}
Это всё! Вам не нужно ничего дополнительно делать для сеток с несколькими строками 😉 Вот CodePen , чтобы вы могли поиграть:
Метод 4: внутренние разделённые отступы
Этот метод аналогичен предыдущему. Мы делили отступы и размещали их с каждой стороны колонки. На этот раз мы используем padding:
Grid-item {
padding-right: 10px;
padding-left: 10px;
float: left;
}
Затем вы рассчитываете ширину колонки так:
Внутренние разделённые отступы.
Обратили внимание, что в этом случае гораздо легче делать расчеты? Всё верно: это треть ширины сетки в каждой контрольной точке.
Grid-item {
width: 33.3333%;
padding-right: 10px;
padding-left: 10px;
float: left;
}
Вот CodePen , что бы вы могли поиграть:
Прежде чем мы двинемся дальше, я хочу вас предостеречь, если вы используете разделенный padding . Если вы взглянете на разметку в CodePen , то увидите, что я добавил дополнительный
Всё потому, что фон отображается в границах padding . Надеюсь, эта картинка поможет вам разобраться, показав связь между background и другими свойствами.
Фон отображается на padding.
Что бы использовал я?
Когда я начинал делать сетки два года назад, я в основном делал сетки, которые были спроектированы по нисходящему подходу и построены на гибридной системе . При таком подходе, я использовал процентные значения и для ширины, и для отступов.
В то время, я любил простоту настроек отступов с одной стороны колонки. Это было проще потому, что я не так хорош в математике. От дополнительных рассчётов отступы / 2 я быстро вырубался.
Я рад, что я пошёл этим путем. Хоть CSS и выглядит более сложным, чем для разделенных отступов, я был вынужден изучить селектор nth-child . Я также понял важность написания CSS сначала для мобильных . Насколько я могу судить, это до сих пор является главным препятствием и для молодых, и для опытных разработчиков.
Так или иначе, если вы попросите меня выбрать сейчас, я выберу разделенные отступы вместо односторонних, потому что CSS для них более простой. Также, я рекомендую использовать margin вместо padding , потому что разметка получается чище. Но padding легче рассчитать, поэтому я продолжу статью с ним.
Шаг 6: создание отладочной сетки
Когда вы только начинаете, особенно полезно иметь под рукой контрольную сетку, которая поможет отладить вашу разметку. Это помогает быть уверенным, что вы всё делаете правильно.
На сегодня, мне известен лишь кривой способ создания отладочной сетки. Нужно создать HTML- разметку и добавить к ней немного CSS . Вот так примерно выглядит HTML :
CSS для отладочной сетки выглядит следующим образом. Я использую разделенные внешние отступы для упрощения разметки отладочной сетки:
Column {
width: calc((100% - 20px * 12) / 12);
height: 80px;
margin-right: 10px;
margin-left: 10px;
background: rgba(0, 0, 255, 0.25);
float: left;
}
Ремарка: Сьюзан Мириам и Собрал Робсон работают над фоновым SVG изображением отладочной сетки для Susy v3 . Это очень захватывающе, так как вы можете использовать простую функцию для создания вашей отладочной сетки!
Шаг 7: внесите изменения в раскладку
Следующий шаг заключается во внесении изменений в раскладку на основе вашего контента. Именно здесь CSS -сетка засияет во всей красе. Вместо того, чтобы создавать разметку с написанием множества сеточных классов, вы можете создать для нее подходящее имя.
Для примера допустим, что у вас есть сетка для раскладки, которая используется только для гостевых статей. На десктопе раскладка выглядит примерно так:
Пример сетки для раскладки, которая используется только для гостевых статей.
Разметка для раскладки этой гостевой статьи может быть такой:
Div class="l-guest-article">
Итак, сейчас у нас есть 12 колонок. Ширина одной колонки 8,333% (100 / 12) .
Ширина.l-guest равна двум колонкам. Поэтому вам нужно умножить 8,333% на два. Достаточно просто. Проделайте тоже самое для остальных элементов.
Здесь я предлагаю использовать препроцессор типа Sass , который позволит вам рассчитывать ширину колонок легче, используя функцию percentage , вместо расчетов вручную:
L-guest-article {
@include clearfix;
.l-guest {
// Хм, читается лучше, чем 16.666% :)
width: percentage(2/12);
padding-left: 10px;
padding-right: 10px;
float: left;
}
.l-main {
width: percentage(7/12);
padding-right: 10px;
padding-left: 10px; .grid-item {
padding-left: 10px;
padding-right: 10px;
float: left;
}
.l-guest-article {
.l-guest {
width: percentage(2/12);
}
.l-main {
width: percentage(7/12);
}
.l-sidebar {
width: percentage(3/12);
}
}
Ну вот, теперь гораздо лучше 🙂
Шаг 8: создание вариаций раскладки
Последний шаг - сделать вашу раскладку адаптивной. Давайте предположим, что раскладка нашей гостевой статьи ведет себя следующим образом:
Разметка нашей гостевой статьи не должна меняться. То, что у нас есть - это самая доступная раскладка из возможных. Так что, изменения должны быть полностью в CSS .
При написании CSS для нашей адаптивной гостевой раскладки, я настоятельно рекомендую вам писать CSS сначала для мобильных , потому что это делает ваш код проще и аккуратнее. В первую очередь, мы можем начать писать CSS для мобильной раскладки.
L-guest-article {
.l-guest {
/* Здесь пусто */
}
.l-main {
margin-top: 20px;
}
.l-sidebar {
margin-top: 20px;
}
}
Нам здесь нечего делать, каждый компонент занимает всю доступную ширину по умолчанию. Однако мы можем добавить верхний отступ к последним двум элементам, чтобы отделить их друг от друга.
Давайте предположим, что для этой раскладки мы установим контрольную точку в 700 px . .l-guest должен занимать 4 из 12 колонок, а.l-main и.l-sidebar по 8 колонок каждый.
Здесь нам надо удалить свойство margin-top у.l-main , потому что он должен быть на одной линии с.l-guest .
Также, если мы установим.l-sidebar ширину 8 колонок, он автоматически перейдет во второй ряд - в первом ряду не хватит места. Поскольку он находится во втором ряду, нам тоже нужно добавить внешний отступ слева у.l-sidebar , чтобы протолкнуть его на позицию. В качестве альтернативы, мы можем сделать его обтекаемым справа - я так и сделаю, это не требует лишних расчётов.
И поскольку мы сделали наши грид-элементы обтекаемыми, грид-контейнер должен включать клиар-фикс, чтобы очистить обтекание у дочерних элементов:
L-guest-article {
@include clearfix;
.l-guest {
@media (min-width: 700px) {
width: percentage(4/12);
float: left;
}
}
.l-main {
margin-top: 20px;
@media (min-width: 700px) {
width: percentage(8/12);
margin-top: 0;
float: left;
}
}
.l-sidebar {
margin-top: 20px;
@media (min-width: 700px) {
width: percentage(8/12);
float: right;
}
}
}
Наконец, давайте перейдем к десктопной раскладке.
Допустим, для этой раскладки мы установим контрольную точку в 1200 px . .l-guest будет занимать 2 из 12 колонок, .l-main - 7 из 12 и.l-sidebar - 3 из 12.
Для этого мы создаем новое медиавыражение в рамках каждого элемента сетки и изменяем ширину по необходимости. Обратите внимание, что мы также должны удалить верхний отступ у.l-sidebar
L-guest-article {
@include clearfix;
.l-guest {
@media (min-width: 700px) {
width: percentage(4/12);
float: left;
}
@media (min-width: 1200px) {
width: percentage(2/12);
}
}
.l-main {
margin-top: 20px;
@media (min-width: 700px) {
width: percentage(8/12);
margin-top: 0;
float: left;
}
@media (min-width: 1200px) {
width: percentage(7/12);
}
}
.l-sidebar {
margin-top: 20px;
@media (min-width: 700px) {
width: percentage(8/12);
float: right;
}
@media (min-width: 1200px) {
width: percentage(3/12);
margin-top: 0;
}
}
}
Вот CodePen с финальной раскладкой, которую мы создали:
О, кстати, вы можете добиться таких же результатов со Susy . Только не забудьте выставить gutter-position в inside-static .
Подводя итог
Ого. Длинная получилась статья. Я думал, трижды помру, пока писал её. Спасибо, что дочитали до конца. Надеюсь, вы не померли трижды, пока читали! 😛
Как вы могли заметить, в этой статье шаги для создания адаптивной сетки относительно простые. Большинство путается на шагах 5 (определение положения отступов) и 8 (адаптация раскладки).
5-й шаг прост, когда вы учитываете все возможные способы, и мы разобрали их вместе. 8-й шаг проходится легче, если у вас достаточно опыта в написании CSS сначала для мобильных .
Надеюсь, эта статья дала вам знания для построения вашей собственной адаптивной сетки, и я надеюсь увидеть как вы строите специально созданную сетку для вашего следующего проекта.
Всем привет! Сегодня мы поговорим про то, что такое 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%;
}
Вот и все! Теперь мы получили гибкую сетку и можем использовать ее при верстке.
Как видите, все очень просто. В основе гибкой сетки, как и гибкого шрифта, лежит все одна и та же формула, запомнив которую, вы сможете без проблем верстать адаптивные сайты.
Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните!
А у меня на этом все, спасибо за внимание и удачной адаптивной верстки!