Всем привет! Сегодня мы поговорим про то, что такое 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 Grid Layout вам больше не понадобятся отдельные файлы стилей, если вы захотите работать с системой сеток. Не менее важным плюсом будет то, что вы больше не будете полагаться на свойства типа inline и float для позиционирования элементов на странице. В этом уроке мы изучим основные моменты сеточных систем, а также создадим простой макет блога.

Поддержка в браузерах

На данный момент только IE 10+ и Edge поддерживают спецификацию Grid Layout – на коммерческих сайтах данную технологию использовать пока что нельзя.

В Chrome данную опцию можно активировать через флаг «Experimental Web Platform features» в chrome://flags. В Firefox – флаг layout.css.grid.enabled.

Другой вариант – использовать полифил, и да, полифил CSS Grid Polyfill существует! Вы можете воспользоваться любым из трех описанных вариантов и изучать Grid Layout пока он еще на раннем этапе разработки.

Обратите внимание: В IE на данный момент работает старая версия спецификации, что означает, что браузер не полностью поддерживает новую спецификацию. Когда мы дойдем до примеров, я рекомендую вам использовать Chrome или Firefox.

Терминология Grid System

Что касается позиционирования элементов, CSS Grid системы – это те же таблицы. Однако данный инструмент намного мощнее и разнообразнее. В данном разделе я расскажу про несколько терминов, которые необходимо будет помнить при работе с сетками:

Единицы измерения fr: с их помощью задается размер свободного пространства. Используется вместе с grid-rows и grid-columns. Из спецификации: «Распределение пространства происходит только после того, как все «длины» или размеры строк и столбцов с контентом достигнут максимальных размеров»

Линии: Линии отмечают границы других элементов. Они бывают как горизонтальные, так и вертикальные. На рисунке ниже 4 вертикальные и 4 горизонтальные линии.

Треки: Треки – пространство между параллельными линиями. На рисунке ниже 3 вертикальных и 3 горизонтальных трека.

Ячейки: Ячейки – строительные блоки сетки. На рисунке ниже всего 9 ячеек.

Области: Область – прямоугольник из произвольного количества ячеек. Т.е. трек – это одновременно и область и ячейка.

Позиционирование элементов в сетке

Начнем с основ. В этом разделе я покажу вам, как с помощью сетки размещать элементы в определенных местах. Для работы с CSS Grid Layout необходимо создать родительский элемент и один или более дочерних. Для примера я возьму разметку ниже:

A
B
C
D
E
F

< div class = "grid-container" >

< div class = "grid-element item-a" > A < / div >

< div class = "grid-element item-b" > B < / div >

< div class = "grid-element item-c" > C < / div >

< div class = "grid-element item-d" > D < / div >

< div class = "grid-element item-e" > E < / div >

< div class = "grid-element item-f" > F < / div >

< / div >

Для создания сетки контейнеру необходимо указать свойства display:grid или display:inline-grid, а также другие стили:

Grid-container { display: grid; grid-template-columns: 200px 10px 0.3fr 10px 0.7fr; grid-template-rows: auto 20px auto; }

Grid - container {

display : grid ;

grid - template - columns : 200px 10px 0.3fr 10px 0.7fr ;

grid - template - rows : auto 20px auto ;

С помощью свойств grid-template-columns и grid-template-rows задается ширина строк и колонок. В примере выше я создал 5 колонок. Колонка шириной 10px используется в качестве разделителя между элементами. Первая колонка имеет ширину 200px. Третья колонка занимает 0.3 части от оставшегося пространства. А пятая колонка занимает 0.7 от оставшегося пространства.

Так как первой строке задано свойство grid-template-rows: auto, это позволяет строке расширяться при добавлении контента. Строка в 20px работает как разделитель. В демо ниже видно, что элементы плотно прижаты друг к другу.

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

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

В этом примере мы будем использовать линейную систему размещения элементов. Линейная система означает, что линии в сетке будут играть главенствующую роль при размещении элементов. В качестве примера возьмем элемент В. Горизонтально данный блок начинается на третьей линии и заканчивается на 4 линии колонок. Кроме вертикальный линий данный элемент расположен между линий на первом и втором ряду.

Для того, чтобы задать стартовую вертикальную линию элемента мы воспользуемся свойством grid-column-start. В нашем случае значение будет 3. Свойство grid-column-end указывает на конечную вертикальную линию элемента. В нашем случае это 4. Значения для горизонтальных линий выставляются таким же образом.

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

Element-b { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; }

Element - b {

grid - column - start : 3 ;

grid - column - end : 4 ;

grid - row - start : 1 ;

grid - row - end : 2 ;

Точно так же для перемещения элемента F в шестую ячейку необходимо:

Element-f { grid-column-start: 5; grid-column-end: 6; grid-row-start: 3; grid-row-end: 4; }

Element - f {

grid - column - start : 5 ;

grid - column - end : 6 ;

grid - row - start : 3 ;

grid - row - end : 4 ;

Создаем базовый макет

Сейчас мы создадим базовый макет блога, в котором будут хедер, футер, сайдбар и два секции под контент. Сперва разметка:

Header
Sidebar
Main Content
Extra Info
Footer

< div class = "grid-container" >

< div class = "grid-element header" > Header < / div >

< div class = "grid-element sidebar" > Sidebar < / div >

< div class = "grid-element main" > Main Content < / div >

< div class = "grid-element extra" > Extra Info < / div >

< div class = "grid-element footer" > Footer < / div >

< / div >

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

Нам осталось определить значения свойств типа grid-row-end для всех элементов. Как и в предыдущем примере, мы воспользуемся сеточной диаграммой, чтобы определить значения свойств.

Специально для пользователей сайта сайт мы предоставляем практический урок, по применению системы 960 Grid. Представьте, что нам дали дизайн для вёрстки. Сначала мы должны наметить себе план реализации структуры сайта, а только потом приступить непосредственно к коду. После изучения этой статьи вам будет по зубам любая классическая вёрстка за кратчайшие сроки и натуральный цвет волос на многие годы (без седины). Итак, вот наш дизайн:

1. Создание сетки

Как вы уже знаете, система 960 Grid использует целый набор классов и доступна в нескольких вариантах (12 колоночной и 16 колоночной версиях). Основной контейнер, независимо от количества колонок всегда будет шириной 960px. Для этого дизайна мы выберем 12 колоночную систему. Каждый блок в системе 960 Grid имеет внешний отступ (margin) 0 10px. Это гарантирует нам ровные, пропорциональные отступы в 20px. Для тех, кого смущает размер 960px, советую взглянуть на вот эту схему. Данный размер является оптимальным для подавляющего большинства разрешений мониторов. Итак, у нас есть возможность создавать блоки вот такой ширины:

  • 140px
  • 220px
  • 300px
  • 380px
  • 460px
  • 540px
  • 620px
  • 700px
  • 780px
  • 860px
  • 940px

У каждого размера есть свой класс, название которого строится по схеме grid_X, где X это количество колонок. Если вам нужен блок в 960px, то следует выбрать класс grid_12. Для того, чтобы активировать систему 960 Grid, необходимо родительскому контейнеру задать класс container_12 или container 16. Ниже находится небольшой пример страницы, состоящей из 3х блоков. Ширина первого равна ширине 960px, остальные 2 в два раза меньше:

Запомните, что когда вы заполняете строку блоками с классом grid_X, убедитесь в том, что в сумме они дают не больше 12. К примеру как у нас - два блока grid_6 + grid_6 = 12. Меньше можно: 6, 4, 2 и т.д. Теперь, когда мы пробежались по основным принципам, можем приступить к практическому занятию:

2. Создаём Mock-Up

Попробуем построить схему того, что нам надо сверстать. В первую очередь нам необходимо 2 блока по 960px. Один для логотипа, другой для навигации. Дальше 2 блока (на одной строке), для постера и презентации сайта, блок разделитель (на всю ширину), 4 колонки (на одной строке), снова блок разделитель и футтер. Приблизительно вот так:

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

Помните, что в конце каждой строчки нам необходимо вставлять

для нормального отображения во всех браузерах. Не забудьте так же заинклудить 960 Grid CSS на вашу страницу в разделе head.

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

Div.spacer { background-color: #8FC73E; height: 1em; } div#navbar { background-color: #8FC73E; padding: 10px 0; }

Вот что у нас должно получиться:

Информация нас сейчас совершенно не интересует, так что в центральные колонки можете вставить контент с вот этой вот страницы. Перед тем, как заняться верхней частью, займёмся нижней. В нашем дизайне фон футера окрашен в серый цвет. На данный момент мы не можем это реализовать так как если вы помните, между блоками есть некоторый отступ, который не позволит нам полностью закрасить данный участок. Для решения этой задачи вынесем 3 блока, относящиеся к футеру в отдельные блоки с id = footer. Ещё одна деталь: когда мы используем классы внутри классов, то хорошо бы задать значения alpha (для того, чтобы указать какой блок будет первым и omega - для последнего):

Div#footer { background-color: #e5e5e6; }

Превосходно! Теперь у нашего футера есть цвет фона. Добавите в него какой-то текст и приступим к блоку с навигацией. По всем законам современных принципов вёрстки, навигация это ненумерованный список. Добавьте следующий код и стиль:

  • Articles
  • Topics
  • About
  • Editors
  • Contact