Вредоносное ПО (malware) - это назойливые или опасные программы,...
Всем привет! Сегодня мы поговорим про то, что такое 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%;
}
Вот и все! Теперь мы получили гибкую сетку и можем использовать ее при верстке.
Как видите, все очень просто. В основе гибкой сетки, как и гибкого шрифта, лежит все одна и та же формула, запомнив которую, вы сможете без проблем верстать адаптивные сайты.
Заметка! Как вы можете видеть, у нас получились довольно длинные значения процентов. Некоторые могут посоветовать вам округлить их, но этого ни в коем случае делать не надо! Запомните!
А у меня на этом все, спасибо за внимание и удачной адаптивной верстки!
Специально для пользователей сайта сайт мы предоставляем практический урок, по применению системы 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
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 можно сэкономить много времени - а время деньги!
Я думаю, что вы уже в курсе, что Grid превосходит Flexbox для создание макетов. Но как насчет адаптивных макетов? Что лучше использовать Flexbox или Grid? Оба умеют работать с адаптивными макетами. Вы можете подумать, что Flexbox лучше подходит, в конце концов - элементы Flex могут растягиваться, сжиматься, изменять направление и т.д. Но в Grid на самом деле есть несколько новых трюков, которые сэкономит вам много времени и проблем для адаптивных макетов.
Функция Minmax
Первый блестящий новый инструмент Grid, функция minmax, который позволяет нам определять диапазоны для столбцов и строк в нашем макете. В этом примере у нас есть оранжевая боковая панель, и мы хотим чтобы ширина была не меньше 100 пикселей, но не более 30% от ширины контейнера. Ширина контейнер 500 пикселей, поэтому наша боковая панель с удовольствием занимает 30% (150 пикселей).
Вот такой же точно код, но ширина контейнера меньше 150px. Теперь наше минимальное значение срабатывает и гарантирует, что оранжевая боковая панель не будет меньше 100 пикселей.
Работа функции minmax просто удивляет, в большинстве случаев вам даже не нужно будет использовать медиа-запросы.
Мы можем добиться аналогичного эффекта с помощью Flexbox, но для этого требуется немного больше работы и кода. Мы должны использовать комбинацию flex-grow, min-width, max-width:
Метод с Grid более гибкий и проще адаптируется. Кода меньше почти в два раза.
Одно правило для всех элементов
Если вам все-таки нужны медиа-запросы, с макетом Grid, это легко сделать. Предположим, мы хотим изменить этот макет на мобильном устройстве в один столбец. С помощью Flexbox нам нужно будет изменить каждый элемент в макете, чтобы переопределить минимальную ширину. Максимальную ширину отменять не нужно, так как минимальная ширина имеет приоритет.
Если у вас простой макет этот подход вполне себе рабочий. Но чем сложнее будет ваш макет, тем больше элементов нужно будет переопределять через медио-запросы. С помощью Grid, эту задачу решить намного проще.
Где-то в 2012 или 2013 году я познакомился с веб-разработкой. Постепенно я начал изучать это направление самостоятельно. Вскоре я понял, что CSS придаёт смысл многим вещам, но не создаёт адекватную разметку. Существует столько хаков, что разобраться в них слишком сложно. Вот почему в современных стандартах, о которых пойдет речь в этой статье, работе с разметкой уделили особое внимание.
Что вы узнаете из этой статьи:
- как раньше работали с CSS-разметкой;
- разницу между устаревшими подходами и современными стандартами;
- как начать работу с новыми стандартами (Flexbox и Grid);
- почему вас должны волновать эти современные стандарты.
Как раньше работали с CSS-разметкой
Задача
Давайте смоделируем весьма стандартную задачу: как создать страницу с двумя секциями - боковой панелью и зоной с основным контентом, у которых одинаковая высота, независимо от размера контента?
Вот пример того, к чему мы стремимся:
Боковая панель и зона с основным контентом одинаковой высоты, независимо от размера контента
Для начала я покажу, как решить эту задачу с помощью устаревших подходов.
1. Создаём div с двумя элементами
Например,
Очевидно, что в main больше текста.
Выделим aside цветом, чтобы его проще было отличить:
Aside { color: #fff; background-color: #8cacea; }
2. Размещаем обе секции рядом
Для этого напишем следующее:
Aside, main{ float: left; }
Этот стиль разделяет доступное пространство в необходимых пропорциях и устанавливает float для aside и main .
Два блока, расположенные рядом
Для тех, кто не знаком с float: это относительно старый способ перемещения элементов влево или вправо.
Как видно на изображении выше, задача всё ещё не выполнена - высота боковой панели не совпадает с высотой основной зоны. Исправим это.
3. Используем трюк с display: table
Чтобы решить эту проблему, надо использовать display: table .
Если вы с ним не знакомы, то вот что надо делать:
- Делаем родительский контейнер (в нашем случае элемент body) таблицей: body { display: table; }
- Убираем float и делаем дочерние элементы aside и main ячейками таблицы: aside, main{ display: table-cell; }
Как только мы сделали это, задачу можно считать решенной. По крайней мере, так её решали раньше.
Оба блока теперь одинаковой высоты.
Разница между устаревшими подходами и современными стандартами
Теперь, когда у вас есть представление о том, как проблему решали раньше, давайте взглянем, на что способны Flexbox и Grid.
Flexbox и Grid - это идеальные решения для CSS-разметки, являющиеся современными стандартами. Если вам необходимо писать CSS-код на хорошем уровне, то обязательно изучите их.
Решение задачи с помощью Flexbox
Контекст форматирования Flexbox инициализируется путем создания flex-контейнера .
Родительским элементом является body . Он содержит боковую панель и основную зону. Создаём контейнер:
Body { display: flex; }
Flexbox в действии
Не забудем о пропорциях:
Aside { width: 25%; } main { width: 75%; }
Задача решена
С Flexbox можно делать много разных вещей:
И я затронул лишь верхушку айсберга Flexbox.
Flexbox доступен в большинстве поддерживаемых браузеров. Им можно полноценно пользоваться в Firefox с 28 версии, Chrome с 29, Safari с 6.1 и Edge с 12.
Прим. перев. Разобраться с Flexbox поможет наше .
Решение проблемы с помощью Grid
В отличие от Flexbox, который по большей части работает в одном измерении, с CSS Grid вы можете использовать как ряды, так и колонки. Посмотрим, как решить нашу проблему с его помощью.
Начинается всё так же, как и в случае с Flexbox. Создаём контейнер:
Body { display: grid; }
Вот весь CSS:
Body { display: grid; background-color: #eeeeee; } aside { color: #fff; background-color: #8cacea; }
И вот что мы получим:
Первичный вариант
Grid доступен в большинстве поддерживаемых браузеров, хотя и в меньшем количестве. Им можно полноценно пользоваться в Firefox с 52 версии, Chrome с 57, Safari с 10.1 и Edge с 16.
Наше последнее изображение пока никак не отличается от предыдущих. Так в чём же магия?
Что, если мы разделим пропорции ширины, как раньше:
Aside { width: 25%; } main { width: 75%; }
Пропорциональное распределение ширины для дочерних элементов
Да, результат отличается, но нам он не подходит. Боковая панель пока не расположена сбоку от главной зоны.
Вот мы и подошли к сути Grid-разметки. После инициализации Grid-контейнера при помощи display: grid необходимо определить ряды и строки внутри него.
Вот как это делается:
Body { grid-template-columns: 30% 70%; }
Решение в одну строку - красиво, не правда ли? grid-template-columns определяет пропорции столбцов в сетке.
Задача решена
Но с помощью Grid можно сделать гораздо больше.
Сначала добавим немного цвета главному блоку, чтобы примеры были более наглядными:
Main { background-color: rgba(39,174,96 ,1); color: #fff; }
Вот что мы должны получить:
Заливка цветом зоны основного контента
Посмотрим, что хорошего может предложить Grid:
- Можно определить разрыв между столбцами: body {
grid-column-gap: 15px;
}
Вот результат:
С разрывом между колонками выглядит гораздо опрятней.
Нет необходимости в добавлении отступов к блокам aside и main: это делает grid-column-gap .
- Можно сделать столько столбцов, сколько вам нужно. Примеры выше использовали только по одному элементу aside и main . Добавим ещё два:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Добавлен разрыв между строками
Для упрощения можно использовать сокращение: grid-gap: 15 px вместо grid-row-gap и grid-column-gap .
- Можно определять размеры строк: body {
grid-template-rows: 200px 300px 400px;
}
Разная высота строк
Теперь высота первой, второй и третьей строк равна 200, 300 и 400 пикселей соответственно.
Для начала хватит и этого - но это далеко не всё.
Как начать работу с новыми стандартами?
Вы увидели пример того, как Flexbox и Grid предоставляют более удобные решения для разметки. Так как начать?
Почему вас должны волновать эти стандарты?
Если вы до сих пор не поняли, почему стоит использовать Flexbox и Grid, то вот несколько проблем, с которыми вы можете столкнуться при использовании предыдущих решений:
- если вы используете «плавающие» блоки и clearfix, то знаете, что с ними могут возникать проблемы;
- при абсолютном позиционировании элементы могут накладываться друг на друга;
- при использовании display: table остается много ненужной разметки;
- при использовании inline-block возникнут проблемы с пустыми местами.
Когда-то давно я писал про необычный сервис , представляющей собой ИИ для создания сайта. Судя по текущим результатам, получилось у них «так себе», особенно учитывая заявленный прайс. в этом плане поэффективнее будут.
Сегодня же хочу поговорить о похожей по названию, но совсем другой по сути «технологии» — 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? — пишите мысли, советы или присылайте интересные линки.