Введение в макет CSS Grid. Гриды с медиа запросами. Решение на CSS Grid

Div#navbar ul { list-style: none; display: block; margin: 0 10px; } div#navbar ul li { float: left; margin: 0 1.5em; font: bold 1em Arial; }

Круто! У нас всё клеится. Всё что осталось, так это блок с постером и презентацией сайта, но перед тем, как мы приступим к их реализации я бы хотел сказать несколько слов о CSS фрэймворках в целом.

3. CSS фрэймворки не решат все ваши проблемы

Перед тем, как начать делать вёрстку дизайна на CSS фрэймворке вы должны учесть некоторые минусы данных систем. Читая данную статью вы не могли не заметить, что правила построения страницы очень строги. Всё имеет свой фиксированный размер. При изменении ширины одного блока, приходится менять и другие. В любом случае надо чем-то жертвовать. К примеру, что вы будете делать, если у вас дизайн на 1000px, а 960 Grid позволяет создавать ширину максимум 960px... А вы хотите 1000px! Без массивного изменения кода, это реализовать невозможно. К примеру клиент захотел сайт пошире или дизайнер несогласен с вашей реализацией. Есть ещё одна проблема, касающаяся высоты колонок. Если у трёх колонок один и тот же цвет фона (как у нас в футере), необходимо, чтобы эти колонки были одинаковой высоты. Ещё один существенный минус: использование дополнительных отступов и создание рамок ведёт к разрушению всей вёрстки. Для того, чтобы добавить то, что необходимо и ничего не разрушить нужно компенсировать добавляемые размеры. Сейчас покажу как. Приступаем к отделке верхней части.

4. Верхняя секция

Во-первых решим проблему с высотой колонки - сделаем её фиксированной. Далее создадим пустые div в одном и другом блоке. В них будет располагаться рисунок или текстовая информация. Внутренние отступы устанавливать не будем т.к. можно нарушить пропорцию ширины сетки. Создадим небольшой внешний отступ тегам p, для того, чтобы текст красиво смотрелся.

В данном случае для стиля лучше создать класс, а не ID, т.к. нам надо применить его к нескольким блокам. При необходимости, это так же позволит нам в 2 счёта поменять высоту. Вот так выглядят наши классы:

Div.topSection div { border: solid 10px #e5e5e6; height: 280px; } div.topSection div p { margin: 10px; }

Круто! Давайте посмотрим, что у нас получилось:

Готовы для заполнения? Тогда в левый блок закиньте какой-то текст, но не переусердствуйте, чтобы не превысить высоту. На самом деле в реальных проектах, дизайнер должен всё это рассчитывать (количество символов, которые будет удовлетворять размеры блока); Перед тем, как вставить изображение в правый блок, нужно определиться с его размерами, если вы ещё этого не сделали. Это можно сделать на ранних стадиях разработки дизайна или через FireBug. Нажмите Inspect. Кликните по div, который нам нужен. Выберите вкладку Layout. После этого вы увидите всю необходимую вам информацию. В помощь вам следующее изображение:

На скриншоте постер имеет размеры 360x280. Найдите изображение и создайте для него стиль:

Img#poster { width: 360px; height: 280px; }

Вот и все! Шаблон готов. Теперь осталось только заполнить реальным контентом и выложить в сеть:

5. Знайте ваши возможности

Теперь, когда всё готово, подведём некоторый итог. 960 Grid позволила нам за 15 минут наклепать шаблон. Круто? Да! Проверяли ли мы его в IE6, IE7? Нет! Должны? Нет. Это всего лишь начало! Что теперь делать? Теперь необходимо показать его заказчику и посмотреть на реакцию. Если его это устроит, то можно приступить к тестированию, а если нет, и заказчик захочет что-то посложнее, то придётся писать всё с нуля самому. Ещё раз повторю. CSS фрэймворки не решают всех проблем. Несмотря на это тысячи разработчиков пользуются ими как обычным инструментом веб-разработки потому что как и у любого инструмента, у CSS фрэймворков есть своё поле, для широкого применения. В любом случае, если запросы к дизайну не супер специфичные (80% случаев), то с помощью 960 Grid можно сэкономить много времени - а время деньги!

В этой статье вы найдете полный курс по сеткам 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;
}

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

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

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

Сегодня же хочу поговорить о похожей по названию, но совсем другой по сути «технологии» — 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? — пишите мысли, советы или присылайте интересные линки.