Что такое гибкая сетка в адаптивной верстке? Именование грид линий. Разметка может быть проще
Специально для пользователей сайта сайт мы предоставляем практический урок, по применению системы 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 можно сэкономить много времени - а время деньги!
Рассказываем, как 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-логики и адаптироваться независимо от него.
Где-то в 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 Tutorial
Grid модуль в CSS был разработан CSS Working Group для того, чтобы предоставить наилучший способ создания шаблонов в CSS. Он попал в Candidate Recommendation в феврале 2017 года, а основные бразуеры начали его поддержку в марте 2017 года.
CSS Grid скоро станет неотъемлемой частью набора инструментов любого фронт-энд разработчика. И если вы один из них, то вам придется учить CSS Grid - который практически определенно станет неосопоримым умением для любой позиции во фронтэнд разработке.
С этим мощным функционалом и интуитивно понятным синтаксисом, шаблоны на grid будут несомненно менять то, на чем создается веб.
Введение
CSS Grid это новая модель шаблона, оптимизированная для двумерных шаблонов. Это идеальная модель для шаблонов сайтов, форм, галерей и всего, что требует точного и отзывчивого позиционирования.
С развитием веба в последние годы, разработка шаблонов веб-сайтов стала всё затруднительнее. В ранние годы веба, HTML таблицы зачастую использовались для многоколоночных шаблонов, форм и т.д. Но у этого метода есть свои недостатки. Это означает то, что представление должно было быть сделано на уровне разметки, таким образом не было различий между представлением и контентом. По-факту, таблицы были созданы для того, чтобы содержать табличные данные, а не для создания шаблонов. И не касаясь семантических проблем, табличные шаблоны не созданы для респонсив дизайна.
Флоаты в конечном итоге заменили табличные шаблоны как всеобще приемлемый и рекомендованный метод создания шаблонов, так как он позволяет нам позиционировать элементы вне зависимости от разметки. Тем не менее, пока этот метод считался значительным улучшением на фоне табличной верстки, у него тоже были свои ограничения. Флоаты в основном были разработаны для шаблонов документов и они не были подходящими для сложных шаблонов приложений, которые сейчас распространены в сети. Флоат элементы сложно контролировать, особенно на девайсах и viewport разных размеров. Это привело к различным гридободобным хакам, которые стали нормой, большинство из них требовалась дополнительная разметка, которая отвлекала от всей концепции разделения контента. Таким образом CSS Working Group было в поиске решения получше.
CSS Grid модель рассматривает эти проблемы и даже более. Она позволяет вам создавать продвинутые шаблоны за долю времени от того, которое бы вы потратили на них с флотами и с меньшим написанием кода.
Но конечно же для этого можно было бы использовать разные значения, такие как 100px , 7em , 30% и так далее. Вы также можете назначать имена строкам вместе с их размерами.
grid-template-columns: 1fr 1fr 1fr
Тоже самое, что и выше, только определяет колонки в гридах.
Выставляет разрыв. То есть пробелы между грид элементами. Тут мы используем vw единицу длины, которая относительна ширине viewport, но также мы можем использовать 10px , 1em и т. д. Grid-gap свойство это сокращение для grid-row-gap и grid-column-gap свойств.
Ну, а другая часть кода просто назначает разные стили грид элементам.
#grid >
Функция repeat()
Вы можете использовать функцию repeat() для повторяющихся объявлений значения размера элемента. Для примера, вместо того, чтобы делать это:
Grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
Мы можем сделать это:
Grid-template-rows: repeat(5, 1fr);
Что значительно сократит количество кода, которое вам нужно будет написать, особенно, если вы работаете с большими и повторяющимися гридами.
Создаем шаблон сайта с CSS Grid
Гриды включают в себя интуитивный «ASCII-графический» синтаксис, в котором вы можете виртуально «видеть» шаблон в коде, по-этому становится очень легко создавать и изменять ваш шаблон. Даже значительные изменения могут быть сделаны за несколько секунд. Этот интуитивный синтаксис также помогает с адаптивным веб-дизайном. Создание разных шаблонов для разных устройств становится довольно пустяковым делом при использовании гридов.
Давайте теперь создадим шаблон сайта, который выглядит таким образом:
А вот код этого шаблона:
Давайте ближе посмотрим на наш код. HTML разметка выглядит таким образом:
И так, мы сделаем
грид-контейнером, таким образом все другие элементы станут грид-элементами.А теперь давайте посмотрим на ASCII-графику, о которой мы говорили прежде.
Grid-template-areas: “header header header” “nav article ads” “footer footer footer”;
Этот кусок определяет наш шаблон. Просто смотря на код, мы можем видеть, что это 3х3 грид (три ряда и три колонки). Таким образом у нас получается пять грид областей на девяти грид ячейках, так как некоторые грид-области занимают несколько ячеек.
Мы так же видим, что шапка занимает весь первый ряд в три ячейки, а подвал занимает весь нижний ряд, также забирая три ячейки. Навигационная, контентная и рекламная секции, все вместе делят место во втором ряду, где каждому из этих элементов достается по одной ячейке.
Теперь мы можем назначить каждую из этих грид-областей каждому элементу:
#pageHeader { grid-area: header; } #pageFooter { grid-area: footer; } #mainArticle { grid-area: article; } #mainNav { grid-area: nav; } #siteAds { grid-area: ads; }
Свойство grid-area это сокращение свойства, которое позволяет вам размещать грид-элементы в гриде. В нашем случае, мы просто отсылаемся к названиям, которые мы предварительно указали в grid-template-areas.
Большая часть шаблона уже завершена. Остаток кода просто будет относиться к размерам, пробелам и высотам, в общем скорее к декоративной области.
Следующий код выдает размеры строкам и колонкам:
Grid-template-rows: 60px 1fr 60px; grid-template-columns: 20% 1fr 15%;
Первая и третья строки - обе в 60px высотой, а вторая строка забирает все оставшееся место.
Первый столбец равен 20% , а третий 15% . Второй же забирает все оставшееся место.
Изменяем шаблон
Вы можете изменить шаблон просто перераспределив грид-области в grid-template-areas .
Таким образом, если мы сменим на это:
Grid-template-areas: “nav header header” “nav article ads” “nav footer ads”;
То в результате получим такой шаблон:
Тем не менее, вам может понадобиться регулеровка размеров, если вы двигаете грид поменьше в место побольше.
Для примера, чтобы сделать так:
Навигация теперь занимает место где был контент, следовательно, размеры были отрегулированы. В противном случае, у нас был бы узкий контент и широкая навигация. Таким образом, код сейчас выглядит таким образом.
Grid-template-areas: “header header header” “article nav ads” /* До этого было “nav article ads” */ “footer footer footer”; grid-template-rows: 60px 1fr 60px; grid-template-columns: 1fr 20% 15%; /* До этого было ‘20% 1fr 15%’ */
Создаем адаптивный Grid
В шаблоне на гридах есть такие значения как auto-fill и auto-fit , которые позволяют вам создавать грид с множеством треков определенного размера, которые будут помещаться в контейнер. Это может означать то, что грид является адаптивным, то есть в нем элементы меняют свои позиции с тем, как вы меняете размер окна браузера.
Пример использования Auto-fill:
Вот результат:
Код отвечающий за это:
Grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
В нем колонкам выдается минимальный размер в 150px и максимум по оставшемуся месту. Такие треки будут повторяться столько раз, сколько нужно для того, чтобы уложиться в контейнер.
Repeat() функция повторяет определение трека количество раз, заданное первым параметром. Использование auto-fill заставит треки повторяться столько раз, пока они не заполнят контейнер.
Размер этих треков указан во втором параметре. В нашем случае, мы используем minmax(150px, 1fr) , чтобы указать то, что минимальный размер столбца равен 150px , а максимальный 1fr .
Auto-fit
auto-fit работает практически также, как и auto-fill . Разница тут только в том, что auto-fit стягивает все пустые треки в конце размещения, в то время как auto-fill нет. Лучший способ тут, это демонстрация со сравнением.
Использование двух маленьких грид элементов тут поможет показать всю концепцию работы. Auto-fill оставляет пустые треки в конце по указанным размерам, а auto-fit растягивает пустой трек, что ведёт к заполнению треков растянутыми элементами для заполнения пространства.
Гриды с медиа запросами
Одной из сильных сторон гридов является то, что вы можете создать совершенно отличный шаблон за секунды.
Это делает гриды идеальными для медиа запросов. Мы можем просто переназначить значения в ASCII-графике и обернуть результат в медиа запрос.
Это трех колоночный шаблон на большом viewport и он сжимается в одноколоночный на маленьких устройствах. Таким образом, этот пример будет выглядеть по-другому в зависимости от размера экрана. В любом случае, вот релевантный код для трехколоночного шаблона, для широких вьюпоротов.
Grid-template-areas: “header header header” “nav article ads” “footer footer footer”;
А вот соответствующий код для мобильной версии:
Grid-template-areas: “header” “article” “ads” “nav” “footer”;
Таким образом, все дело состоит в переназначении значений в свойстве grid-template-areas .
В нашем случае мы обернули мобильную версию в медиа запрос, как тут:
@media all and (max-width: 575px) { body { grid-template-areas: “header” “article” “ads” “nav” “footer”; grid-template-rows: 80px 1fr 70px 1fr 70px; grid-template-columns: 1fr; } }
Обратите внимание, что мы также подкорректировали значения в grid-template-rows и в grid-template-columns , чтобы они подходили под новый шаблон. В частности, тут должна быть только одна колонка и она должна занимать все свободное место. А так как все грид элементы будут в одну кучу, мы назначим 5 строк и определим их высоты.
Совмещаем grid c block
В зависимости от требований к вашему шаблону, нет ничего, что остановит вас изменить мобильную версию на display: block . Как тут:
@media all and (max-width: 575px) { body { display: block; } }
Это будет работать также как и в примере выше, но по-дефолту, элементы встанут по своему исходному порядку. В примере выше, мобильная версия имеет nav под ads, но если бы мы использовали display: block , то nav был бы выше ads.
Также используя этот метод, вам также может понадобится добавление несколькоих внешних отступов для компенсации отсутствия разрывов, которые были включены в версию с гридами.
Явные и неявные гриды
CSS Grid использует концепцию явного грида и неявного. Это ключевая концепция, которой вам нужно остерегаться при создании гридов, в противном случае под конец вы увидите скопление строк и колонок, о существовании которых вы даже и не ожидали.
Явный грид, это грид, который вы определяете в grid-template-rows, grid-template-colums и в grid-template-areas.
Тем не менее, вы все еще можете иметь элементы, которые не умещаются в ваш «явно» опредленный грид. Для примера, вы определили грид, который может уместить только шесть элементов, но сам контейнер на самом деле состоит из девяти элементов. Только шесть элементов будут умещаться в явный грид и три останутся. И вот где начинаются неявные гриды.
Неявные гриды автоматически генерируются грид-контейнером, всякий раз когда грид-элементы располагаются за пределами явного грида. Контейнер генерирует неявные грид треки, добавляя неявные строки в грид. Эти строки вместе с явными гридами и формируют неявные. Вот пример :
В этом примере, мы явно определяем две строки и две колонки, что уместит четыре грид элемента. Тем не менее, тут присутствует шесть грид элементов, таким образом был создан неявный грид, для того, чтобы уместить два дополнительный элемента.
И это очень хорошо.Если бы не был создан неявный грид, то два дополнительных элемента создали бы полный беспорядок в сетке.
Выставляем размер трека для неявных гридов
Возможно вы заметили, что дополнительный ряд не такой в высоту, как предидущие два. Это потому что мы выставили высоту строки в grid-template-rows свойстве, но применяется она только для явных гридов. Высота строки на неявных гридах должна выставляться с помощью свойства grid-auto-rows. Но так как мы этого не сделали, выходит, что неявный ряд использует размер трека auto, который основывается на контенте. Вот так располагаются свойства выставления размера трека:
В общем выходит так:
Явный грид использует grid-template-rows и grid-template-columns
Неявный грид использует grid-auto-rows и grid-auto-columns
В это случае нам не обязательно указывать конечные значения на первом элементе, потому что он охватывает только один трек. Тоже самое можно сказать и про второй грид элемент. По-дефолту, если вы не указываете конечную линию, то элемент охватит только один трек.
На самом деле, нам не нужно было указывать любое позиционирование для первого грид элемента, так как он находится на определенной позиции, то он был бы в любом случае. Но если бы мы не указали позиционирование для второго элемента, то он бы находился сразу за первым элементом занимая только 1 трек.
Именование грид линий
Вы также можете проименовать грид линии для облегчения обращения к ним. Это можно делать выставляя свойства grid-template-rows и grid-template-columns , например как тут:
#grid { display: grid; /* Set the tracks and name the lines */ grid-template-rows: 50px 1fr 80px ; grid-template-columns: 120px 1fr 80px ; grid-gap: 5px; height: 90vh; } … /* Now refer to those named lines */ #item2 { grid-row-start: row3-start; grid-column-start: col2-start; grid-row-end: row3-end; grid-column-end: col3-end; }
Проименованные линии могут быть как явными, так и неявными. Неявные проименованные линии создаются всякий раз, когда вы создаете именные грид-области используя grid-template-areas .
Имя берется из грид-области с прибавлением в конце -start и -end, в зависимости от того начало это или конец линии.
Таким образом для каждой проименованной грид области header, будет создано четыре неявных линии. Две названы header-start и column-start в проименованной грид области и две названы header-end соответственно.
Проименованные грид области
Грид области могут быть проименованы в свойстве grid-template-areas самого грид контейнера. Это то, что мы делали до этого, когда создавали шаблон сайта. Чтобы восстановить это в памяти, то это выглядит так:
#grid { display: grid; /* Проименовываем грид области*/ grid-template-areas: “a a” “b c”; … } … /* Теперь применяем каждый грид элемент к проименованной грид области */ #a { grid-area: a; } #b { grid-area: b; } #c { grid-area: c; }
Вы можете указать пустую ячейку, используя точку (.) или серию точек без пробелов. Для примера:
Grid-template-areas: “a a” “. b”; Или grid-template-areas: “header header” “… content”;
Свойства размещения гридов
Есть три коротких свойства, которые можно использовать вместо длинных свойств для размещения гридов, упомянутых в примерах выше. Вот куда они все помещаются.
grid-area - это свойство является сокращением для для:
grid-column - это свойство является сокращением для:
grid-column-start - указывает какая колоночная линия грид элемента стартовая и на сколько треков тянется.
grid-column-end - указывает то, на каких колоночных линиях заканчивается грид элемент и на сколько треков тянется.
grid-row - это свойство является сокращением для:
grid-row-start - указывает с какой строчной линии начинается грид элемент и на сколько треков он тянется.
grid-row-end - указывает какая строчная линия будет последней для элемента и насколько треков она будет тянуться.
Вы также можете использовать grid-auto-flow свойство, которое упоминалось в главе перед этой. Оно указывает как автоматически размещенные grid элементы должны помещаться в гриде. Автоматически размещенные элементы это те, которые не явно размещены с использованием любого свойства выше.
Создаем вложенный грид
Грид элементы могут сами становиться гридами в CSS Grid. То есть вы сможете вкладывать грид-элемент в другой грид-элемент, тем самым создавая вложенный грид.
Чтобы создать такой вложенный грид, все что вам нужно сделать - это применить display: grid (или display: inline-grid) к грид элементу и он сам станет гридом. Вы также можете использовать display: subgrid для создания подгрида. , как это происходит.
Наследование
Большинство грид свойств не наследуются, что означает то, что ваш вложенный грид не будет наследовать значения своего родительского грида. Это позволяет вам делать вносить изменения в родительский грид, без непреднамеренного влияния на вложенный грид.
Для примера, вы выставили grid-auto-flow: column на родительском гриде, но вы не выставили свойство на вложенный грид. В этом случае , вложенному гриду будет выставлено значение row, потому что это изначальное значение для этого свойства.
Обратите внимание, что на родительском гриде, числа идут вертикально вниз по колонкам, вместо того, чтобы располагаться горизонтально вдоль строки, но вложенный грид все таки идет в горизонтальном направлении вдоль строки.
Подгриды
CSS Grid модуль задает значение subgrid для свойства display . Тем не менее, не все браузеры его ещё поддерживают. Это значение должно оказаться довольно полезным.
Subgrid это вложенный грид, но с display: subgrid . Это делает его особенным типом грид-контейнера, который участвует в выставлении размера грида родительского грид контейнера. Другими словами, контент подгрида влияет на размер родительского грида, позволяя контенту расставляться по двум гридам. Ниже пример того, где это свойство могло бы быть полезным.
Вот список элементов:
А вот CSS, где список является гридом, а элементы списка являются подгридами.
Ul { display: grid; grid: auto-flow / auto 1fr; } li { display: subgrid; grid-column: span 2; margin: 0.5em; border: solid; padding: 0.5em; } label { grid-column: 1; } input { grid-column: 2; }
Этот пример показал бы label и input в ряд, а бордер бы был выставлен вокруг каждого элемента списка. Выставление каждому элементу списка subgrid означает то, что не должно возникнуть каких либо проблем с выравниванием форм ввода, потому что каждый элемент списка будет участвовать в формировании размера родительского грида.
Формы с авто-размещением
Вы можете использовать явные гриды как приемущество при создании форм или любого другого скопления элементов, которым требуется выравнивание в виде гридов. Для примера, вы можете использовать явные гриды для создания такой формы:
И когда вы будете добавлять элементы формы в разметку, явный грид будет добавлять строки, чтобы уместить их. Таким образом, чтобы создать форму сверху, нам нужна такая разметка.
Не нужды в дополнительной разметке, чтобы правильно все расставить. И также тут нет нужды в добавлении дополнительных классов для элементов формы. Мы добавляем только один класс для
Вы автоматически можете добавлять новые элементы формы и они будут автоматически подстроены под друие, так как они будут размещены в явном гриде.
Это является возможным, так как мы сделали саму форму гридом (к.myForm применено display: grid). И потом указали, что labels идут в одну колонку, а controls в другую.
Вот ещё один пример, на этот раз с ещё большим количеством элементов:
Когда подгриды получат широкое распространение среди браузеров, станет возможным выравнивать элементы формы, которые не прямые потомки
