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

Что такое сетка знает каждый кто когда либо работал с графическими редакторами (Photoshop, Fireworks, Gimp и т.п.) и конечно же оценил её необходимость при создание любого дизайна. Но как реализовать Сетку в вебе? По сути Табличная вёрстка была самым настоящим дизайном веб-страниц с Сеткой, несомненно очень удобным. Но не целевое использование элементов table приводило в ужас.
К счастью огромная популярность веб стандартов, выросшая и продолжающая расти за последние годы, а так же их поддержка современными броузерами, дали нам возможность создавать много-функциональные страницы с очень небольшой, логичной разметкой. Такая вёрстка получила название Блочная . Но и у Блочной вёрстки оказалась слабая сторона. При создание страниц с огромным набором элементов различных по размерам и по смыслу, разметка таких страниц стала очень тяжёлым занятием, а если над разметкой работает более чем один человек такая работа может стать кошмаром.
И вот на выручку пришла техника с использованием Сетки. Эта техника является гибридом между Блочной и Табличной вёрсткой. Её использование даёт нам:

• скорость и лёгкость разработки
• свободу позиционирования
• пропорциональность элементов страницы и их размещения

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

Что такое вёрстка с Сеткой? Прежде всего это концепция. Концепция которая включает в себя очень много аспектов дизайна и очень мало правил для её реализаций. Это даёт полную свободу и никакой стандартизаций в её исполнении. Я скажу даже больше - одну и ту же Сетку можно реализовать самыми разными способами. Если вы уже читали про Сетку то могли заметить что каждый автор начинает с новой стороны углубляясь далеко в детали, это мягко говоря вводит в замешательство. К счастью начали появляться Grid Systems - CSS библиотеки для работы с Сеткой. И на их примере можно очень быстро освоить базовые принципы этой техники.

Я думаю не имеет смысла писать о всех аспектах Сетки, информацию о ней вы можете спокойно найти в Интернете. Я предлагаю создать свою простенькую Grid System .

Для начала надо усвоить что сетка состоит из колонок и промежутков между ними. Основных величины три - это ширина сетки, ширина колонки, и ширина промежутка между колонками. Ширина колонок зависит от их количества.

Давайте попробуем сделать сетку шириной 950 пикселей в 16 колонок с промежутками в 10 пикселей, выходит что одна колонка должна быть шириной 50 пикселей. Уяснив все величины мы открываем любой известный нам графически редактор и создаём макет. К Сетке так же можно добавить отступы с лева и с права, допустим по 20 пикселей и того получается макет шириной 990 пикселей. Мой пример посмотреть можно .

Теперь можно начать создавать нашу библиотеку. Как и большинство CSS библиотек наша нуждаетса в глобальном сбросе, я предлагаю CSS Reset от Эрика Майера , сохранив reset.css создадим grid.css в который сразу же можем добавить метод для чистки контейнеров содержащих плавающие блоки - Clear Fix . Первое что нам нужно это правило для контейнера который будет содержать все наши колонки. Ширина каждого контейнера ровна ширине нашей сетки.

.container {
margin: 0 auto;
width: 950px;
}

Теперь можно добавить правило для наших колонок, оно содержит ширину и отступ. Отступ выполняет роль промежутка(gutter) между колонками.

.column {
float: left;
margin-right: 10px;
overflow: hidden;
width: 50px;
}

Для последней колонки отступ не нужен, для этого добавим правило и для неё:

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

.clearfix:after, .container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Clearfix, .container { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix, * html .container {height: 1%;}
.clearfix, .container {display: block;}
/* End hide from IE-mac */

Теперь можно приступить к нашим колонкам. Колонки могут быть шириной в две три и так далее. Для этого мы можем применить к ним следующие правила:

.span-1 { width: 50px; }
.span-2 { width: 110px; }
.span-3 { width: 170px; }
.span-4 { width: 230px; }
.span-5 { width: 290px; }
.span-6 { width: 350px; }
.span-7 { width: 410px; }
.span-8 { width: 470px; }
.span-9 { width: 530px; }
.span-10 { width: 590px; }
.span-11 { width: 650px; }
.span-12 { width: 710px; }
.span-13 { width: 770px; }
.span-14 { width: 830px; }
.span-15 { width: 890px; }
.span-16 { width: 950px; margin-right: 0; }

В принципе это всё что нужно для реализаций Сетки, можно ещё добавить обёртку и класс для просмотра Сетки с макетом. Создадим main.css и добавим в него:

.wrapper {
margin: 0 auto;
width: 990px;
}
.overlay {
background: transparent url(overlay.png) repeat-y scroll top left;
}

Вот как может выглядеть вёрстка:

Я думаю для начала этого достаточно.
Мой пример можно посмотреть

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

Что такое сетка знает каждый кто когда либо работал с графическими редакторами (Photoshop, Fireworks, Gimp и т.п.) и конечно же оценил её необходимость при создание любого дизайна. Но как реализовать Сетку в вебе? По сути Табличная вёрстка была самым настоящим дизайном веб-страниц с Сеткой, несомненно очень удобным. Но не целевое использование элементов table приводило в ужас.
К счастью огромная популярность веб стандартов, выросшая и продолжающая расти за последние годы, а так же их поддержка современными броузерами, дали нам возможность создавать много-функциональные страницы с очень небольшой, логичной разметкой. Такая вёрстка получила название Блочная . Но и у Блочной вёрстки оказалась слабая сторона. При создание страниц с огромным набором элементов различных по размерам и по смыслу, разметка таких страниц стала очень тяжёлым занятием, а если над разметкой работает более чем один человек такая работа может стать кошмаром.
И вот на выручку пришла техника с использованием Сетки. Эта техника является гибридом между Блочной и Табличной вёрсткой. Её использование даёт нам:

• скорость и лёгкость разработки
• свободу позиционирования
• пропорциональность элементов страницы и их размещения

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

Что такое вёрстка с Сеткой? Прежде всего это концепция. Концепция которая включает в себя очень много аспектов дизайна и очень мало правил для её реализаций. Это даёт полную свободу и никакой стандартизаций в её исполнении. Я скажу даже больше - одну и ту же Сетку можно реализовать самыми разными способами. Если вы уже читали про Сетку то могли заметить что каждый автор начинает с новой стороны углубляясь далеко в детали, это мягко говоря вводит в замешательство. К счастью начали появляться Grid Systems - CSS библиотеки для работы с Сеткой. И на их примере можно очень быстро освоить базовые принципы этой техники.

Я думаю не имеет смысла писать о всех аспектах Сетки, информацию о ней вы можете спокойно найти в Интернете. Я предлагаю создать свою простенькую Grid System .

Для начала надо усвоить что сетка состоит из колонок и промежутков между ними. Основных величины три - это ширина сетки, ширина колонки, и ширина промежутка между колонками. Ширина колонок зависит от их количества.

Давайте попробуем сделать сетку шириной 950 пикселей в 16 колонок с промежутками в 10 пикселей, выходит что одна колонка должна быть шириной 50 пикселей. Уяснив все величины мы открываем любой известный нам графически редактор и создаём макет. К Сетке так же можно добавить отступы с лева и с права, допустим по 20 пикселей и того получается макет шириной 990 пикселей. Мой пример посмотреть можно .

Теперь можно начать создавать нашу библиотеку. Как и большинство CSS библиотек наша нуждаетса в глобальном сбросе, я предлагаю CSS Reset от Эрика Майера , сохранив reset.css создадим grid.css в который сразу же можем добавить метод для чистки контейнеров содержащих плавающие блоки - Clear Fix . Первое что нам нужно это правило для контейнера который будет содержать все наши колонки. Ширина каждого контейнера ровна ширине нашей сетки.

.container {
margin: 0 auto;
width: 950px;
}

Теперь можно добавить правило для наших колонок, оно содержит ширину и отступ. Отступ выполняет роль промежутка(gutter) между колонками.

.column {
float: left;
margin-right: 10px;
overflow: hidden;
width: 50px;
}

Для последней колонки отступ не нужен, для этого добавим правило и для неё:

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

.clearfix:after, .container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Clearfix, .container { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix, * html .container {height: 1%;}
.clearfix, .container {display: block;}
/* End hide from IE-mac */

Теперь можно приступить к нашим колонкам. Колонки могут быть шириной в две три и так далее. Для этого мы можем применить к ним следующие правила:

.span-1 { width: 50px; }
.span-2 { width: 110px; }
.span-3 { width: 170px; }
.span-4 { width: 230px; }
.span-5 { width: 290px; }
.span-6 { width: 350px; }
.span-7 { width: 410px; }
.span-8 { width: 470px; }
.span-9 { width: 530px; }
.span-10 { width: 590px; }
.span-11 { width: 650px; }
.span-12 { width: 710px; }
.span-13 { width: 770px; }
.span-14 { width: 830px; }
.span-15 { width: 890px; }
.span-16 { width: 950px; margin-right: 0; }

В принципе это всё что нужно для реализаций Сетки, можно ещё добавить обёртку и класс для просмотра Сетки с макетом. Создадим main.css и добавим в него:

.wrapper {
margin: 0 auto;
width: 990px;
}
.overlay {
background: transparent url(overlay.png) repeat-y scroll top left;
}

Вот как может выглядеть вёрстка:

Я думаю для начала этого достаточно.
Мой пример можно посмотреть

Рассказываем, как CSS Grid позволяет создавать качественную адаптивную разметку, не прибегая к сторонним фреймворкам вроде Bootstrap.

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

Разметка может быть проще

Замена Bootstrap на CSS Grid сделает HTML чище. В качестве примера рассмотрим небольшой кусок страницы, которую нам предстоит сверстать, выглядит она так:

Bootstrap

Для начала рассмотрим пример кода для этой страницы на Bootstrap.

Есть несколько вещей, на которые следует обратить внимание:

— Каждый ряд должен располагаться в собственном div.
— Необходимо использовать названия классов для создания разметки (col-xs-2).
— Поскольку шаблон будет расти и усложняться, тоже произойдет и с HTML-кодом.

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

CSS Grid

Теперь рассмотрим тот же пример разметки на чистом CSS:

Такая разметка читается куда легче. Ушло нагромождение классов и сократилось количество div.

Конечно, в отличие от примера c подключенным к странице Bootstrap, здесь нужно самостоятельно описать стили:

Больше гибкости

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

CSS Grid

CSS сетка перестроится очень просто. Все, что нужно – просто добавить media query и описать, что должно произойти с элементами страницы.

Таким образом, чтобы переделать страницу, не нужно даже открывать HTML.

Bootstrap

Если разработчику понадобится изменить что-то в Bootstrap-шаблоне, придется начать с изменения самого HTML. Фактически, необходимо сдвинуть MENU, чтобы оно оказалось над HEADER.

В этом случае просто изменить поведение стилей в media query не выйдет. Чтобы решить эту нужно прибегать к помощи JavaScript.

Больше нет лимита в 12 колонок

Не то чтобы это серьезное ограничение, но в некоторых случаях доставляет неудобства. Поскольку сетка Bootstrap базово разделена на 12 колонок, могли возникнуть проблемы с разделением, к примеру, на 5, 7 или 9 колонок.

CSS Grid позволяет сделать в ряду столько колонок, сколько потребуется.

Это делается через установку значения свойства grid-template-columns:

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

Поддержка браузерами

На момент написания этой заметки 75% процентов браузеров поддерживают CSS Grid.

Множеству разработчиков ничто не мешает начать использовать CSS Grid прямо сейчас, но, к сожалению, не все проекты готовы работать с этим методом разметки. Тем не менее, многие известные разработчики, такие как Morten Rand-Eriksen из LinkedIn и Jen Simmons из Mozilla убеждены, что в именно за таким подходом в формировании страниц будущее: визуальное представление должно быть отделено от JavaScript-логики и адаптироваться независимо от него.

В этой статье вы найдете полный курс по сеткам CSS. Мы разберем что это такое, какие отличая с FlexBox и как с можно работать с CSS Grid.

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

CSS Grid можно назвать более крутой и улучшенной версией FlexBox , ведь FlexBox позволяет работать лишь в одной плоскости: либо создавать столбцы, либо создавать ряды.

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

Предлагаем вам посмотреть полноценное видео по изучению сеток CSS, чтобы моментально вникнуть в суть CSS Grid :

• Урок по ;

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

Первый файл

Второй файл

Третий файл

Принцип работы

Работа с сетками очень проста. Алгоритм действий здесь следующий:

1. Создаем один основной блок и помещаем в него другие блоки (секции );
2. Добавляем к основному блоку свойство display: grid ;
3. Ко всем элементам основного блока теперь можно применять свойства сеток CSS;
4. Добавляем различные свойства. Документацию по всем возможным свойствам вы можете ;

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

Таким образом, вы можете писать меньше, а получать больше. Что еще может быть круче? Делитесь своим опытом использования сеток в своих проектах в комментариях к этой статье ⇣

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

Медиа запросы

Возьмем демо из предыдущего урока.

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

Начнем мы с копирования объявления первой сетки. Обернем дубликат в медиа запрос по технике mobile-first. В качестве точки перехода я взял произвольно 500px.

Grid-1 { /* стили для сетки */ } @media only screen and (min-width: 500px) { .grid-1 { /* стили для сетки */ } }

Теперь мы поменяем нашу сетку в первом объявлении, поместив все в один столбец. Задаем один столбец мы с помощью свойства grid-template-columns. Проверьте, чтобы наши четыре строки были заданы через свойство grid-template-rows и соответствовали макету при помощи свойства grid-template-areas:

Grid-1 { display: grid; width: 100%; margin: 0 auto; grid-template-columns: 1fr; grid-template-rows: 80px auto auto 80px; grid-gap: 10px; grid-template-areas: "header" "main" "sidebar" "footer"; }

Grid - 1 { display : grid ; width : 100 % ; margin : 0 auto ; grid - template - columns : 1fr ; grid - template - rows : 80px auto auto 80px ; grid - gap : 10px ; grid - template - areas : "header" "main" "sidebar" "footer" ;

Чтобы уместиться в маленькие экраны, мы сделали grid-gap равным 10px по умолчанию. Вот что у нас получилось . Вы также должны заметить, что мы меняем свойства padding и font-size в элементах.grid-1 div с помощью медиа запросов.

Наша вложенная сетка

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

Item-2 { /* стили сетка */ } @media only screen and (min-width: 600px) { .item-2 { /* стили сетки */ } }

Если переделать демо с автозаполнением и изменить ширину колонок на minmax(9em, 1fr), сетка бы пыталась вместить максимально возможное количество треков шириной 9em, а затем расширила бы их до 1fr, пока не заполнится весь контейнер:

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

Заключение

Обобщим все вышесказанное в списке:

Медиа запросы позволяют нам полностью перестроить сетку при помощи изменения свойства grid-template-areas (и других) для различных сценариев.

Свойство transition никак не влияет на макет сетки.

Для заполнения контейнера сетки хорошо подходит ключевое слово auto-fill.

Функция minmax() отлично дополняет автозаполнение, но не дает нам настоящей адаптивности.

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