Что такое гибкая сетка в адаптивной верстке? Решение проблемы с помощью Grid. CSS Grid выравнивание
На технику Сетки я обратил внимание около года назад. Тогда эта техника после очень поверхностного изучения показалась мне бесполезной и очень экспериментальной, отталкивало то что для реализаций необходимо создавать лишнюю разметку. Но сейчас уже становится трудно не замечать количество веб-сайтов построенных на сетке, а так же количество статей и уроков о ней. Благодаря последним стало гораздо проще изучить и понять принципы и концепцию, сделать более менее реальные выводы. Мой вывод спустя год таков - «Это простое и полезное решение которое когда либо было создано для вёрстки веб-страниц, должен знать каждый уважающий себя веб-дизайнер.»
Что такое сетка знает каждый кто когда либо работал с графическими редакторами (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. Мы разберем что это такое, какие отличая с FlexBox и как с можно работать с CSS Grid.
Сетки CSS это новый подход к созданию адаптивных сайтов с множеством блоков, расположенных в любых местах сайта. Помимо CSS Grid существует также технология , которая очень схожа с сетками. Разбираться в мельчайших различиях между ними мы не будем, так как на это понадобиться отдельная статья, но вкратце опишем основные отличия.
CSS Grid можно назвать более крутой и улучшенной версией FlexBox , ведь FlexBox позволяет работать лишь в одной плоскости: либо создавать столбцы, либо создавать ряды.
Сетки CSS позволяют делать больше, так как они работают в обеих плоскостях одновременно. Таким образом, создание адаптивных блоков сайта происходит намного проще, а возможности для расстановки объектов как вам вздумается - просто безграничны.
Предлагаем вам посмотреть полноценное видео по изучению сеток CSS, чтобы моментально вникнуть в суть CSS Grid :
- Урок по ;
В ходе урока было создано три страницы, код каждой страницы вы можете скопировать ниже.
Первый файл
Второй файл
Третий файл
Принцип работы
Работа с сетками очень проста. Алгоритм действий здесь следующий:
- Создаем один основной блок и помещаем в него другие блоки (секции );
- Добавляем к основному блоку свойство display: grid ;
- Ко всем элементам основного блока теперь можно применять свойства сеток CSS;
- Добавляем различные свойства. Документацию по всем возможным свойствам вы можете ;
Каждому блоку можно устанавливать ширину, высоту, его расположение. Блоки, которые создаются на основе сеток сразу имеют адаптивный дизайн, который подстраивает блоки под различные разрешения экранов.
Таким образом, вы можете писать меньше, а получать больше. Что еще может быть круче? Делитесь своим опытом использования сеток в своих проектах в комментариях к этой статье ⇣
От автора: статья из серии понятие макета 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, практическими упражнениями, решениями распространенных проблем с сетками.
От автора: при создании сложных сайтов сетки имеют огромное значение. Их значимость в современном веб-дизайне становится ясной, стоит только взглянуть на количество фреймворков, в которые внедрена данная технология для ускорения разработки.
После знакомства со спецификацией 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 необходимо создать родительский элемент и один или более дочерних. Для примера я возьму разметку ниже:
< 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 ; |
Создаем базовый макет
Сейчас мы создадим базовый макет блога, в котором будут хедер, футер, сайдбар и два секции под контент. Сперва разметка:
< 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 для всех элементов. Как и в предыдущем примере, мы воспользуемся сеточной диаграммой, чтобы определить значения свойств.
Всем привет! Сегодня мы поговорим про то, что такое 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%;
}
Вот и все! Теперь мы получили гибкую сетку и можем использовать ее при верстке.
Как видите, все очень просто. В основе гибкой сетки, как и гибкого шрифта, лежит все одна и та же формула, запомнив которую, вы сможете без проблем верстать адаптивные сайты.
Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните!
А у меня на этом все, спасибо за внимание и удачной адаптивной верстки!