CSS Grid идеально подходит для адаптивной верстки. Введение в макет CSS Grid. Введение в CSS Grid

Когда-то давно я писал про необычный сервис , представляющей собой ИИ для создания сайта. Судя по текущим результатам, получилось у них «так себе», особенно учитывая заявленный прайс. в этом плане поэффективнее будут.

Сегодня же хочу поговорить о похожей по названию, но совсем другой по сути «технологии» — CSS Grid! Пост состоит из нескольких частей:

Данный подход в построении макетов позволяет легко создавать достаточно гибкие сетки сайтов с помощью CSS. В будущем он, наверняка, будет использоваться повсеместно. Если я правильно понимаю, отлично подойдет для тех же задач, что и Flexbox, но в отличии от него может одновременно работать в двумерных измерениях (столбцах и строках). Ниже предлагаю перевод статьи , что является неким вступлением в тему и содержит простые познавательные примеры. Внимание! Автор заметки проводит в декабре бесплатный(!) курс по CSS Grid, если хотите, отправляйте запрос на его Email.

Также на просторах интернета нашел полезное видео по теме. Возможно, кому-то проще воспринимать информацию так:

Введение в CSS Grid

В текущем году эта технология получила встроенную поддержку в Chrome, FF, Safari, поэтому вполне вероятно, в недалеком будущем станет популярными инструментом. Но пока что нужно не забывать позаботиться об устаревших и отстающих веб-браузерах.

Самая простая сетка

Здесь 2 основных объекта:

• родительский / wrapper (оборачивающий все внутренние, составляющие его блоки);
• дочерние / items (сами элементы).

Вот простейшая конструкция:

Wrapper { display: grid; }

Однако сразу после этого ничего особо не поменяется, так как не определен формат отображения. Вы увидите 6 DIV’ов идущих друг после друга.

Колонки и строки

Чтобы сделать вашу сетку двумерной нужно указать параметры строк и колонок — используем опции grid-template-row и grid-template-colum соответственно:

.wrapper { display : grid; grid-template-columns : 100px 100px 100px ; grid-template-rows : 50px 50px ; }

Wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; }

Поскольку для колонок имеется три значения, то их будет генерироваться такое же число, следовательно, рядков — только 2. Цифры в пикселях задают в первом случае ширину элементов (по 100px), во втором — высоту (50px).

Вот еще один пример, который поможет лучше понять принцип работы:

.wrapper { display : grid; grid-template-columns : 200px 50px 100px ; grid-template-rows : 100px 30px ; }

Wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 100px 30px; }

Отобразится следующая картинка:

Расположение и размеры

С этой функцией вы получите реально очень мощные возможности по созданию сеток сайтов. Допустим, у нас имеется размер 3х3:

.wrapper { display : grid; grid-template-columns : 100px 100px 100px ; grid-template-rows : 100px 100px 100px ; }

Wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; }

Если в HTML коде, как в нашем примере, 6 DIV элементов (см. в самом начале), то в данном случае на сайте отобразится только 2 ряда, третий временно не будет заполнен. Однако, когда мы начнем применять разные параметры для позиции и размеров блоков — grid-columnand grid-row , ситуация изменится.

Задаем одному из объектов стили:

.item1 { grid-column-start : 1 ; grid-column-end : 4 ; }

Item1 { grid-column-start: 1; grid-column-end: 4; }

Это означает, что DIV c классом item1 начинается с первой линии колонки в сетке и заканчивается на 4-той, то есть заполняет собой весь ряд.

Собственно, теперь некоторые объекты переместились на последнюю строку, которая у нас была прописана заранее (3х3). Существует вариант попроще:

.item1 { grid-column : 1 / 4 ; }

Item1 { grid-column: 1 / 4; }

.item1 { grid-column-start : 1 ; grid-column-end : 3 ; } .item3 { grid-row-start : 2 ; grid-row-end : 4 ; } .item4 { grid-column-start : 2 ; grid-column-end : 4 ; }

Item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; }

Он дает нам следующую картинку:

Получилось разобраться? В принципе, не сложно, однако нужно понимать, что это лишь базовая часть нюансов по CSS Grid.

Прототипирование и области макета с CSS Grid

Код разметки при этом следующий (HTML):

Container { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-gap: 5px; }

Если по строкам все, в принципе, понятно, то с колонками нужно прояснить. Здесь в значении grid-template-columns создается сетка, что состоит из 12ти одинаковых колонок (ширина каждой = 1/12 от общей) + отступы между ними в 5px (grid-gap).

Добавляем grid-template-areas

Опция дает еще больше гибкости и удивительных функций. Возможно, синтаксис и оформление параметра grid-template-areas выглядит немного необычно, но дальше вы поймете почему все именно так:

.container { display : grid; grid-gap: 5px ; grid-template-columns : repeat (12 , 1fr) ; grid-template-rows : 50px 350px 50px ; grid-template-areas : "h h h h h h h h h h h h h" "m m c c c c c c c c c c c" "f f f f f f f f f f f f f" ; }

Container { display: grid; grid-gap: 5px; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-template-areas: "h h h h h h h h h h h h h" "m m c c c c c c c c c c c" "f f f f f f f f f f f f f"; }

Это своего рода визуальное представление вашей сетки сайта в CSS. Все символы в данном параметре формируют 3 строки и 12 колонок, определенные строкой выше. Каждая буква отвечает за одну ячейку. Названия в примере соответствуют блокам HTML кода: header (h), menu (m), content (c) и footer (f), но можете использовать любые другие варианты.

Присвоение областей шаблоны и эксперименты

На следующем шаге вы «логически связываете» символы контейнера и элементы DIV:

.header { grid-area : h; } .menu { grid-area : m; } .content { grid-area : c; } .footer { grid-area : f; }

Header { grid-area: h; } .menu { grid-area: m; } .content { grid-area: c; } .footer { grid-area: f; }

На сайте отобразится макет вида:

А теперь начинается магия. Давайте поменяем местами некоторые буквы в параметре grid-template-areas , например «c» и «m» местами:

grid-template-areas : "h h h h h h h h h h h h h" "c c c c c c c c c c c m m" "f f f f f f f f f f f f f" ;

grid-template-areas: "h h h h h h h h h h h h h" "c c c c c c c c c c c m m" "f f f f f f f f f f f f f";

Сетка будет выглядеть по другому:

Добавление адаптивности в эту конструкцию вообще выглядит потрясающе. С помощью одного HTML вы бы такое не реализовали, а вот в CSS все возможно.: ". h h h h h h h h h h ." "c c c c c c c c c c m m" ". f f f f f f f f f f ." ;

grid-template-areas: ". h h h h h h h h h h ." "c c c c c c c c c c m m" ". f f f f f f f f f f .";

На сайте выглядит так:

Никаких скриптов и HTML — только магия CSS Grid!

Дополнительные примеры Grid и Flex

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

Классический макет сайта

У нас имеется шапка и футер, растянутые на всю ширину, а между ними — блок контента с двумя сайдбарами. В первом случае при уменьшении экрана все объекты останутся в тех же позициях, что и раньше.

Если нужно чтобы блоки располагались один под другим, то:

2х колоночная сетка блога

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

Второй прием — дает их расположение один за другим.

Распределение элементов по ширине

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

Картинка внутри статьи

Здесь контент разделен на 2 части, а между ними расположен полноэкранный блок.

Итого. В общем, открыл для себя понятие CSS Grid, которое, честно говоря, приятно впечатлило — особенно рам где рассматривались области макета с разными буквами. Безусловно, это все лишь азы «технологии», плюс я не расписывал детально каждый параметр кода. В последнем разделе статьи примеры более комплексные, их следует внимательно просмотреть. Там комбинируется и Flex, и Grid. Если данная тема интересна, подписывайтесь на курсы первого автора — Email записи в оригинальной первой-второй заметке.

Есть что добавить по CSS Grid? — пишите мысли, советы или присылайте интересные линки.

Всем привет! Сегодня мы поговорим про то, что такое 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. Мы разберем что это такое, какие отличая с FlexBox и как с можно работать с CSS Grid.

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

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

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

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

• Урок по ;

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

Первый файл

Второй файл

Третий файл

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

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

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

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

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

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

Что такое сетка знает каждый кто когда либо работал с графическими редакторами (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;
}

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

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

Где-то в 2012 или 2013 году я познакомился с веб-разработкой. Постепенно я начал изучать это направление самостоятельно. Вскоре я понял, что CSS придаёт смысл многим вещам, но не создаёт адекватную разметку. Существует столько хаков, что разобраться в них слишком сложно. Вот почему в современных стандартах, о которых пойдет речь в этой статье, работе с разметкой уделили особое внимание.

Что вы узнаете из этой статьи:

• как раньше работали с CSS-разметкой;
• разницу между устаревшими подходами и современными стандартами;
• как начать работу с новыми стандартами (Flexbox и Grid);
• почему вас должны волновать эти современные стандарты.

Как раньше работали с CSS-разметкой

Задача

Давайте смоделируем весьма стандартную задачу: как создать страницу с двумя секциями - боковой панелью и зоной с основным контентом, у которых одинаковая высота, независимо от размера контента?

Вот пример того, к чему мы стремимся:

Боковая панель и зона с основным контентом одинаковой высоты, независимо от размера контента

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

1. Создаём div с двумя элементами

Например,