CSS Grid Layout Module основные концепции и примеры использования


Содержание материала:

Основы CSS Grid — создание сетки сайта и параметры Grid на реальных примерах

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

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

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

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

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

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

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

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

Кратко о CSS Gr >

CSS Gr > Предназначение Grid Layout — полностью изменить способ проектирования пользовательских интерфейсов, дизайн которых основан на сетке.

Да, с помощью CSS всегда можно было создать макет, но каждый подход имеет свои недостатки и, по сути, является хаком. Сначала для верстки использовались таблицы, затем float’ы, позиционирование и inline-block… Данные инструменты не были разработаны специально для создания колоночных макетов, и многие необходимые функции были недоступны (например, вертикальное центрирование). Решение практически каждой проблемы приравнивалось к «танцу с бубном».

Модуль Flexbox отчасти облегчил задачу веб-разработчикам, но всё же он больше подходит для создания простых одномерных макетов, а не сложных двумерных (кстати, Flexbox и Grid отлично работают в паре). Grid — это первый CSS-модуль, созданный специально для разработки полноценных макетов и устранения проблем, которые мы долгое время решали обходными путями.

Начало работы

Работа с Grid Layout похожа на Flexbox и заключается в применении специальных CSS-правил к родительскому элементу (grid-контейнеру) и к его дочерним элементам (grid-элементам). Для начала необходимо:

  • определить grid-контейнер путем добавления к нему свойства display со значением grid ;
  • задать размеры строк и столбцов, используя свойства grid-template-rows и grid-template-columns ;
  • поместить дочерние элементы в сетку при помощи свойств grid-row и grid-column .

Как и в случае с Flexbox, последовательность расположения HTML-элементов не сильно важна для Grid: при помощи CSS можно упорядочить объекты по вашему желанию. Это позволяет легко перестраивать макет, используя медиа-запросы. Только представьте себе, что для адаптации веб-страницы под разные размеры экрана вам понадобится написать всего несколько строк CSS-кода. Grid Layout однозначно является самым мощным модулем из когда-либо представленных.

Компоненты Grid

Ниже будут описаны компоненты Grid-системы. Просим вас разобраться в них и запомнить терминологию, чтобы в последующих уроках вы понимали, о чем идет речь.

Grid-контейнер

Grid-контейнер (англ. grid container) — это элемент, которому задано свойство display: grid . Он является непосредственным родителем всех grid-элементов. Пример grid-контейнера:

Grid-элементы

Grid-элементы (англ. grid items) — прямые потомки grid-контейнера. Важно: потомки grid-элементов уже не являются потомками grid-контейнера. Пример grid-элементов:

Grid-линии

Grid-линии (англ. grid lines) — это разделительные линии, которые составляют структуру сетки. Линии могут быть горизонтальными и вертикальными (grid-линии строк и grid-линии столбцов) и располагаться по обе стороны от строки или столбца. Пример grid-линии:

Grid-путь
Grid-ячейка
Grid-область

Поддержка браузерами

По состоянию на декабрь 2020 года модуль CSS Grid Layout поддерживается следующими браузерами:

  • Firefox 52+;
  • Chrome 57+;
  • Safari 10.1+;
  • Opera 44+;
  • Edge 16+;
  • IE 10-11 и Edge 12-15 (частичная поддержка с префиксом -ms- ).

Следить за изменениями в списке браузеров, поддерживающих данный модуль, можно на сайте Caniuse.

В следующем уроке мы рассмотрим свойства для grid-контейнера.

Насколько хорошо вы знаете свойство CSS display?

display является одним из наиболее важных свойств CSS для разметки. Большинство из нас использовали значения block , inline CSS и none . Также часто используются table и inline-block . Новым и весьма полезным является значение flex , потому что оно было создано специально для разметки.

При рассмотрении свойства display нельзя не упомянуть дерево блоков . Браузер анализирует CSS и выводит дерево блоков, которое представляет собой структуру форматирования отображаемого документа. Свойство display определяет тип отображения блоков.

То, что мы уже достаточно хорошо знаем

Значения свойства display , которые мы постоянно используем — на самом деле сокращения. Например, block — сокращение от block flow . Полный список можно найти в спецификации .

Для всех элементов задано значение свойства display по умолчанию, но оно может быть переопределено.

Удаляет элемент и все его дочерние элементы из потока документа. Документ отображается так, как если бы элемент в нем никогда не существовал. Пространство, которое он занимает, распределяется между другими элементами.

CSS display inline;

Элемент генерирует один или несколько встроенных блоков. Их можно считать дополнением к блочным элементам.

Генерирует поле для блочного элемента. Все блочные элементы начинаются с новой строки и растягиваются по ширине контейнера.

Элемент, отображаемый, как элемент списка, ведет себя так же, блочный. Но также генерирует поле маркера, для которого могут быть заданы стили с помощью свойства list-style . Только элементы

  • по умолчанию имеют значение list-item . Данное значение используется для сброса элементов
  • на поведение по умолчанию.

    display inline block CSS

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

    Адаптивный пошаговый обработчик

    Одним из компонентов, который мне в свое время пришлось разрабатывать, был числовой пошаговый обработчик для выбора различных типов пассажиров. У меня был статический файл Photoshop с мобильным шаблоном и шаблоном для стационарных компьютеров. Но между ними было несколько неучтенных размеров, на которых макет « ломался «.

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

    Помните макеты на основе таблиц?

    Несмотря на то, что большинство из нас больше не использует табличную верстку, display: table и inline table CSS может оказаться полезно в некоторых случаях. Например, если вы хотите выводить таблицы только на более широких макетах, а для меньших экранов хотите сохранить стандартное расположение блоков. Этого можно достигнуть с помощью комбинации медиа-запросов и свойства display .

    table Соответствует HTML-элементу

    . Определяет структурный блок....
    table-header-group Соответствует HTML-элементу

    table-row Соответствует HTML-элементу

    table-cell Соответствует HTML-элементу

    .
    table-row-group Соответствует HTML-элементу

    table-footer-group Соответствует HTML-элементу .
    table-column-group Соответствует HTML-элементу .
    table-column Соответствует HTML-элементу .
    table-caption Соответствует HTML-элементу .
    inline-table CSS Это единственное значение, которое не имеет непосредственного отношения к HTML-элементам. Элемент ведет себя, как табличный. Но как встроенный, а не элемент блочного уровня.

    Новые виды блоков

    Автор спецификаций Flexbox и Grid , сделал очень меткое замечание по поводу новых режимов отображения:

    Grid предназначен для двухмерных макетов. Он может быть использован в качестве замены менее гибкого flexbox (сетка с одним столбцом / строкой действует очень похоже на flexbox), но это не задействует всех его возможностей.

    display: flex;

    Введение режима flexbox или CSS Flexible Box , ознаменовало момент, когда мы получили спецификацию, которая предназначена для размещения контента в браузере.

    Разметка контента в интернете изменилась не значительно. Когда дизайнеры хотели создать какой-нибудь креативный макет, первое что они использовали, это табличную верстку.

    И когда появился CSS , мы перешли на плавающие макеты, вкладывая элементы в различные div , чтобы они обтекали и смещались, как нам нужно а . Плавающие макеты все еще широко распространены, но пройдет совсем немного времени и flexbox и grid станут преобладающим методом разметки:

    Объявляя для элемента display: flex , inline flex CSS , мы преобразуем его в гибкий контейнер, и его дочерние элементы становятся гибкими элементами. Это не распространяется далее, то есть гибкие свойства не распространяются на элементы ниже, чем его дочерние элементы. И flex-контейнер , и flex-элементы имеют соответствующие им свойства.

    Свойства для flex-контейнера

    flex-direction — определяет главную ось и направление гибких элементов. Полный список значений flex-direction .
    flex-wrap — указывает, должны ли flex-элементы настраиваться таким образом, чтобы поместиться в одну строку, или они могут быть перенесены на несколько строк. Полный список значений flex-wrap .
    flex-flow — сокращенное свойство от flex-direction и flex-wrap . Полный список значений flex-flow .
    justify-content — определяет, как распределяется вдоль главной оси пространство между и вокруг flex-элементов . Полный список значений justify-content .
    align-items — определяет, как пространство между и вокруг flex-элементов распределяется перпендикулярно главной оси. Полный список значений align-items .
    align-content — определяет, как линии flex-элементов распределены внутри контейнера. Не применяется, если элементы размещаются только в одной строке. Полный список значений align-content .

    Свойства flex-элементов

    order — указывает порядок, в котором размещаются элементы в соответствии с увеличением значения свойства order. Элементы с одинаковым значением размещаются в соответствии с исходным порядком. Полный список значений order и inline CSS .
    flex-grow — определяет, могут ли элементы расширяться, если вокруг них есть свободное пространство. Значение свойства определяет долю пространства, которую может занять элемент. Полный список значений flex-grow .
    flex-shrink — определяет, насколько элементы могут сокращаться в случае, если недостаточно свободного пространства. Значение свойства определяет пространство, которое элемент может освободить. Полный список значений flex-shrink .
    flex-basis — определяет размер элемента по умолчанию до того, как доступное пространство будет распределяться между всеми flex-элементами. Полный список значений flex-basis .
    flex — сокращенное свойство от flex-grow, flex-shrink и flex-basis, именно в таком порядке. Полный список значений flex .
    align-self — позволяет переназначать выравнивание одиночного гибкого элемента. Полный список значений align-self .

    display: grid;

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

    Текущую версию CSS Grid Layout Module Level 1 мы запустили в 2011 году, как рабочий проект. Как и в случае с flexbox , эта спецификация возникла вследствие растущей потребности дизайнеров получить в свое распоряжение надлежащий метод для разметки контента без ущерба для семантики HTML .

    Обратите внимание, что CSS-сетки поддерживаются не во всех браузерах. Хотя Microsoft Edge и Internet Explorer поддерживают более старую версию спецификации через префикс -ms- . Когда-то так было и с CSS inline block .

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

    Вместо этого CSS grid разрабатывалась с помощью переключателей. Функция должна быть вручную включена разработчиками. В Google Chrome и Opera нужно перейти к chrome://flags и opera://flags соответственно и включить « экспериментальные функции веб-платформы ». В Firefox нужно перейти к about:config и установить для layout.css.grid.enabled и layout.css.grid-template-subgrid-value.enabled — true .

    Основные термины CSS grid

    Сеточный контейнер — аналогично концепции гибкого контейнера, применив к элементу ` display: grid; ` мы делаем его дочерние элементы сеточными элементами.

    Сеточный элемент — если к родительскому элементу применено ` display: grid; ` то этот элемент считается сеточным элементом. Дочерние элементы сеточного элемента не считаются сеточными.

    Трек сетки — это может быть либо столбец или ряд сетки.

    Линия сетки — линии, которые определяют структуру сетки. Вы можете представить их как линии между треками сетки.

    Ячейки сетки — одиночные блоки сетки, ограниченные соседними горизонтальными и вертикальными линиями.

    Пространство сетки — это крутая часть. Сетка позволяет определить область, состоящую из нескольких ячеек сетки.

    Вы можете прямо сейчас перейти к Сеткам в примерах и найти там множество примеров использования сеток.

    Малоизвестные и экспериментальные значения

    display: run-in;

    Устанавливает элемент как встроенный или блочный в зависимости от контекста.

    display: ruby;

    Для начала стоит представить элемент . В двух словах, это элемент для отображения аннотаций на одной базовой линии с основным текстом. Используется, чтобы указать правильное произношение слов. Он довольно часто используется в восточно-азиатских языках, таких как китайский или японский.

    Существуют определенные общие черты между свойствами display: ruby и inline table CSS , но спецификация настоятельно предостерегает от применения значения ruby при отображении не-ruby элементов, таких как span, для вывода ruby-текста . Вместо этого лучше разметить контент с использованием HTML-элементов ruby , чтобы экранные дикторы и визуализаторы могли интерпретировать структуры ruby .

    ruby Соответствует HTML-элементу . Генерирует блок ruby-контейнера, который устанавливает контекст ruby-форматирования для дочерних элементов, размеченных, как внутренние блоки.
    ruby-base Соответствует HTML-элементу . Внутренний ruby-блок в ruby-контексте.
    ruby-text Соответствует HTML-элементу . Внутренний ruby-блок в ruby-контексте.
    ruby-base-container Соответствует HTML-элементу . Внутренний ruby-блок в ruby-контексте.
    ruby-text-container Соответствует HTML-элементу . Внутренний ruby-блок в ruby-контексте.

    display: contents;

    — CSS Display Level Модуль 3

    Авторы спецификации пытаются сказать, что, когда вы устанавливаете для элемента свойство display: contents , он исчезнет из DOM . Но все его дочерние элементы остаются и занимают пространство, которое занимает он. На данный момент эта спецификация поддерживается только в Firefox . Измените в Firefox размер полной версии приведенного ниже примера, чтобы увидеть, как это работает.

    Заключение

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

    Данная публикация представляет собой перевод статьи « How well do you know CSS display? » , подготовленной дружной командой проекта Интернет-технологии.ру

    Знакомство с CSS Gr >

    Терминология

    Прежде чем мы погрузимся в концепцию CSS Grid, давайте пробежимся по основной терминологии.
    Линии сетки (Grid lines). Вертикальные и горизонтальные линии, которые делят сетку и образуют столбцы и строки.

    Ячейка сетки (Grid cell). Отдельный элемент сетки CSS.

    Область сетки (Grid area). Цельное пространство, ограниченное четырьмя линиями сетки. Область сетки может содержать любое число ячеек.

    Ряд сетки (Grid track). Пространство между двумя линиями сетки. Это пространство может быть как вертикальным, так и горизонтальным.

    Строка сетки (Grid row). Горизонтальный ряд сетки.

    Столбец сетки (Grid column). Вертикальный ряд сетки.

    Межрядный промежуток (Gutter). Пространство между строками и столбцами в сетке.

    Контейнер сетки (Grid container). Контейнер, содержащий всю CSS-сетку. Это будет элемент, имеющий свойство display: grid или display: inline-grid.

    Элемент сетки (Grid item). Любой элемент, являющийся прямым потомком контейнера сетки.

    Приступим к созданию нашей первой сетки с CSS Grid Layout.

    Ваша первая сетка

    Создайте сетку

    Первое, что нужно сделать, это создать контейнер сетки. Мы можем это осуществить, объявив display: grid для элемента контейнера. В этом примере мы используем div с классом container.

    Определите строки и столбцы

    Есть несколько способов определения строк и столбцов. Для нашей первой сетки мы используем свойство grid-template-columns и grid-template-rows . Эти свойства позволят нам определить размер столбцов и строк нашей сетки. Для создания двух строк фиксированной высоты (150px) и трех столбцов фиксированной ширины (150px), просто напишите:

    Чтобы добавить четвертый столбец шириной 70px, напишите:

    …и так далее, сколько бы столбцов вы ни добавляли.

    Добавьте межрядный промежуток

    Добавление межрядного промежутка – удивительно простое дело с CSS Grid Layout. Всего лишь добавьте:

    Эта простая строчка даст вам одинаковый межрядный промежуток между всеми строками и столбцами. Чтобы определить размер промежутка отдельно для строк и столбцов, вы можете использовать вместо этой записи свойства grid-column-gap и grid-row-gap .

    Теперь давайте соберем это все вместе. Вот наш HTML:

    Всего несколько строк CSS позволят нам создать простую сетку:

    Просмотреть результат можно на Codepen

    Впечатляет, правда? Просмотрите указанный выше пример с помощью инструментов разработчика в вашем браузере. Попробуйте изменить ширину столбцов, высоту строк. Замените свойство grid-gap на grid-column-gap и grid-row-gap поиграйте с разной шириной и высотой.

    При работе с CSS Grid Layout просто необходимо иметь хороший набор инструментов разработчика. В Firefox есть фантастический функционал, специально созданный чтобы помочь вам создавать и конструировать сетки. Заинтригованы? Скачайте Firefox Developer Edition и у вас будет браузер с самыми лучшими инструментами для работы с CSS Grid Layout.

    Инструменты для разработчиков в Firefox

    Дизайнеры и разработчики мгновенно влюбляются в CSS Grid Layout. Именно поэтому в Mozilla славно потрудились над разработкой в Firefox панели макета с инструментами для разработчиков, дополнив CSS Grid Inspector и Box Model.

    Наложение сетки CSS (CSS grid overlay)

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

    Интерактивная сетка (interactive grid)

    В сайдбаре есть новая интерактивная сетка очертаний. Наведите мышь на контуры чтобы подсветить части сетки на странице и показать информацию по размеру, занимаемому пространству и позиционированию.

    Отображение пространства сетки (display grid area)

    Настройка «Показывать пространства сетки» (“Display grid areas”) показывает связанные пространства и относящиеся к ним имена в каждой ячейке. Скоро мы рассмотрим подробнее, как задать имя пространству сетки.

    Визуализируйте изменения

    Grid Inspector способен визуализировать изменения, происходящие с контейнером сетки. Это позволяет вам точно видеть, где на странице находятся ряды наклоняемой, поворачиваемой или масштабируемой сетки.

    Эти функции и усовершенствования в настоящее время доступны и версиях Firefox Nightly и Firefox Developer. Мы рекомендуем скачать и установить себе один из этих браузеров прежде чем продолжить. Эти функции, доступные только в Firefox, помогут вам в изучении подробностей CSS Grid Layout.

    Единица FR (FR unit)

    В нашей первой сетке мы создали столбцы с фиксированной шириной. Это великолепно, но не очень гибко. К счастью, CSS Grid Layout представляет новую единицу длины под названием fr (сокращение от “fraction”). Mozilla Developer Network определяет единицу fr как единицу длины, представляющую долю доступного пространства в контейнере сетки. Если мы хотим переписать нашу предыдущую сетку чтобы в ней было три равных столбца, мы должны изменить наш CSS используя единицы fr:

    Указание repeat()

    Возьмите на заметку: если вы поймали себя на повторении единиц длины, используйте указание repeat() . Приведите приведенный выше код к такому виду:

    Просмотреть результат можно на Codepen

    Просмотрите эту сетку и измените свойство grid-template-columns контейнера сетки на следующее:

    Что случилось? Как видите, вы можете не только использовать указание repeat() для части списка рядов, но также и смешивать единицы длины (в данном случае px и fr).

    В следующем разделе мы узнаем больше о смешении единиц.

    Смешение единиц

    При указании размеров рядов вы можете использовать фиксированные размеры с такими единицами как px или em. Также вы можете использовать гибкие размеры, такие как проценты или единицы fr. Тем не менее настоящее волшебство CSS Grid Layout проявляется в возможности смешивать эти единицы. Лучше всего понять как это работает можно на примере:

    Здесь мы объявили сетку с тремя столбцами. Первый столбец имеет фиксированную ширину в 100px. Второй занимает 30% доступного пространства, а третий имеет ширину в 1fr, что означает, что он занимает одну часть доступного пространства. В данном случае, он займет все упомянутое пространство.

    Результат смотрите на Codepen

    Просмотрите эту сетку и измените свойство grid-template-columns на следующее:

    Видите, что случилось? Вместо 3 столбцов у вас есть третий столбец в 2fr, занимающий 2/3 упомянутого пространства, и четвертый столбец, занимающий оставшуюся 1/3. Продолжайте испытывать инструменты разработчика Firefox и пробуйте различные комбинации единиц.

    Когда будете готовы, переходите к следующей теме, посвященной позициям элементов в сетке.

    Позиция элементов

    Понимание линий сетки

    Теперь, когда мы освоились с созданием сетки и определением размеров строк и столбцов, мы можем перейти к размещению элементов на этой сетке.

    Есть несколько способов размещения элементов, но мы начнем с базового примера.

    Рассмотрим простую сетку 3х2.

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

    Если нам нужен больший контроль, мы можем позиционировать элементы на сетке используя номера линий.

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

    Позиция элемента

    Вот HTML, который мы будем использовать в этом примере:

    Допустим, мы хотим разместить первый элемент сетки (имеющий класс item1) во второй строке и втором столбце. Этот элемент должен будет начинаться от второй «строчной» линии и продолжаться до третьей. Также он будет начинаться от второй «столбцовой» линии и продолжаться до третьей. Мы можем записать наш CSS таким образом:

    Сокращенная запись свойств

    Мы также можем записать это сокращенно:

    Попробуйте изменить свойство grid-row для item1 на следующее:

    Видите, что произошло? Элемент занял несколько столбцов, от линии 1 до линии 3. Он также разместился между 3 и 4 «строчными» линиями, что привело к созданию новой строки. Эта новая строка сейчас является скрытой, а ее высота установлена свойством grid-auto-rows родительской сетки. Вы можете узнать больше о правилах, применяемых по умолчанию, в MDN.

    Теперь давайте применим наши знания на практике, создав простой макет.

    Создание простого макета

    Теперь, научившись создавать сетку и располагать на ней элементы, давайте создадим простой макет. Мы не будем представлять здесь какие-либо концепции. Мы просто воспользуемся сокращенным указанием свойств grid-row и grid-column чтобы вручную разместить такие элементы, как хедер, футер и так далее.

    Вот результат на Codepen

    Сейчас самое время попробовать настройку «показать номера линий» в панели Firefox CSS Grid Layout. Просмотрите таким образом приведенный выше результат и выберите панель макета. Тут вы можете активировать наложение сетки и отметить «показывать номера линий». Удобно, правда? Этот инструмент облегчает визуализацию вашей сетки при позиционировании элементов.

    Области шаблона

    В предыдущем примере мы узнали как создавать базовый макет путем позиционирования элементов с помощью линий сетки. Другой метод позиционирования заключается в использовании именованных областей сетки со свойствами grid-template-areas и grid-area . Лучше всего показать это на примере. Давайте восстановим сетку из нашего предыдущего примера со свойством grid-template-areas :

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

    Оставшаяся часть нашего CSS:

    Вы знаете, что инструменты разработчика Firefox могут показывать имена областей? Попробуйте! Просмотрите сетку из этого примера и откройте панель макета. Тут вы можете управлять функциями наложения сетки и показа названий областей.

    Именованные линии

    Мы уже знаем как размещать элемент на сетке применяя свойства grid-column и grid-row с указанием определенных линий сетки. Мы также можем при определении сетки дать названия всем этим линиям или некоторым из них. Это позволит нам использовать эти названия вместо номеров линий. Чтобы проименовать линию, нужно просто добавить нужное имя в квадратных скобках:

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

    Вы знаете, что используя Firefox DevTools вы можете кастомизировать цвет налагаемой сетки? Пример выше имеет белый фон, а установленный по умолчанию пурпурный – не самый лучший вариант. При выборе опции наложения сетки вы увидите круг рядом с названием сетки, который показывает цвет наложения. Кликните на него и вы сможете выбрать цвет по своему вкусу. Попробуйте какой-нибудь другой цвет, например, красный.

    Узнайте больше

    Надеемся, это короткое пособие дало вам достаточно сведения для начала экспериментов и построения с использованием CSS Grid Layout. Но мы только приоткрыли самые базовые функции этого мощного инструмента. Если вы готовы копнуть глубже, для вас есть тысячи отличных ресурсов.

    Например, сайт и твиттер Джен Симмонс – дизайнерского представителя Mozilla. Она также является разработчиком, писательницей, спикером и членом рабочей группы CSS.

    Или сайт и твиттер Рэйчел Андрю — разработчика, спикера и автора. Она также является членом рабочей группы CSS и разрабатывает обучающие ресурсы, посвященные CSS Grid Layout.

    MDN – Mozilla Developer Network – имеет понятные руководства и документацию по каждому свойству CSS Grid Layout.

    ***
    Подписывайтесь на наш канал в Telegram!

    CSS Gr >keynikel в 05.10.2020 05.10.2020

    Рубрики
    Что еще почитать?
    • Подсказки о доступности подсказок 16.10.2020
    • Плейсхолдеры в полях делают больно 10.10.2020
    • Сборка Webpack 4 для чайников и сочувствующих 22.06.2020
    • Блок со скошенными углами на CSS 19.04.2020
    • Использование инлайн SVG-спрайтов в WordPress теме 13.09.2020

    Что вы узнаете:

    1. Как построить CSS-сетку, поддерживаемую браузерами.
    2. Как подключить Grid Layout.
    3. Разберетесь в основах строк и столбцов сетки.
    4. Познакомитесь с новой дробной единицей (fr).
    5. Поработаете со вложенными сетками.

    ДА! Пора начинать!

    Если вы, вдруг, не знаете, что такое CSS Grid, то, в двух словах, это относительно новый стандарт для создания сеток в CSS.

    Шаг 1. Построить CSS-сетку, поддерживаемую браузерами

    На момент написания этой статьи (9.04.2020) поддержку браузерами CSS Grid нельзя назвать впечатляющей. Тем не менее, это не повод, не пытаться разобраться с ней уже сейчас.

    Поддержка технологии браузерами

    Действие: Обновите ваш Chrome, Firefox, Safari или Opera браузер, или просто скачайте последний Firefox или Chrome.

    Шаг 2. Изучить основы Grid Layout

    Как и во всем в этой жизни, знание основ поможет вам избежать большого количества головной боли.
    Действие: Чтение и написание кода
    Взгляните на этот код:

    Grid в CSS

    CSS Grid Layout — это новое многообещающее явление в мире верстки. Используя Grid, можно построить макеты, которые ранее невозможно было построить в CSS. С ним возможности чуть ли не безграничны. Grid претендует на звание «лучшей системы для вёрстки макетов HTML». В этой статье я попробую разобраться какой он, этот Grid, на вкус и доступно поделиться знаниями с вами.

    Grid поддерживается уже почти всеми браузерами, поэтому изучать уже пора!

    Grid — это сетка с элементами на ней. Расставлять элементы можно как угодно. Представьте себе шахматную доску и фигуры, Grid контейнер это доска, элементы это фигуры. А дальше ставь как нравится.

    Grid — это набор горизонтальных и вертикальных «линий», которые пересекаются между собой и создают сетку из рядов и колонок. Элементы могут быть помещены в сетку, опираясь на номер линии или номер ряда/колонки.

    Чтобы разобраться с Грид-сеткой нужно понять из чего конкретно состоит эта сетка. Для этого хорошенько изучите схему ниже и описание к ней.

    Схема Grid сетки.

    Описание Грид сетки

    Контейнер — содержит Grid сетку, в которой находятся элементы.

    Элементы — HTML элементы внутри сетки. Ими станут HTML элементы первого уровня (прямые дети контейнера). Чтобы элемент появился в сетке, в нем (внутри) элемента должно быть хоть что-то (текст, другие HTML теги). Пустой элемент — это всего лишь ячейка для расположения в нем чего-либо.

    Линии — это образные линии (на самом деле никаких линий нет), разделяющие сетку на колонки и ряды, они создают структуру сетки. Линии автоматически нумеруются. Также линиям можно указывать имена, чтобы потом прикреплять к ним элементы по номеру или по имени линии. По сути линия — это номер или имя колонки/ряда. Расстояние между линиями (колонками/рядами) можно указать через grid-gap: , grid-row-gap: , grid-column-gap: .

    Ряд/колонка (row/column, track) — все что находится между соседними линиями, т.е. линии разделяют сетку на ряды и колонки.

    Ячейка (cell) — место куда будет расположен элемент. Ячейка это пересечение колонки и ряда.

    Область (area, поле) — объединение одной или нескольких ячеек в общую ячейку (поле). Это такая большая ячейка также ограниченная линиями. Области можно задать имя, чтобы удобно было помещать туда элементы.

  • Разрыв (gap) — расстояние между рядами и колонками. Разрывает линию на две. Так между линиями, а как следствие и колонками/рядами, ячейками появляется пустое место. Это своего рода margin , border-spacing между ячейками. По умолчанию линия между ячейками всего одна (ячейки слеплены), но если указать разрыв, то мы разорвем линию, и появится расстояние между колонками/рядами, при этом номер или имя линии (колонки/ряда) остается одно.
  • Для включения Grid, любому HTML элементу достаточно присвоить css свойство display:grid; или display:inline-grid; .

    После включения grid свойства, внутри контейнера создаются grid сетка, а все вложенные элементы (первого уровня) станут ячейками сетки.

    Пример создания грид-блока с двумя колками и тремя рядами разных размеров:

    Особенности Grid

    Элементы Grid сетки можно расставлять сразу на несколько полей сетки. Можно менять направление или расположения элементов в сетке. Колонкам и рядам можно давать имена. Можно создавать шаблон сетки и расставлять элементы по шаблону.

    Размеры колонок/рядов. Сетку можно создавать с точными или гибкими размерами колонок/рядов (шириной/высотой). Точные это px , em , % , а гибкие новая единица измерения в grid fr (фракция — свободное место в сетке).

    Расположение элемента. Элементы можно размещать в указанном месте сетки, указав номер колонки/ряда или их имя (если оно есть). Или путем привязки элемента к области Grid (область нужно создать). Если не указать конкретное расположение элемента в сетке, то элемент размещается по умолчанию в первую свободную ячейку: как во flex: по горизонтали (→) или по вертикали (↓). Поведение по умолчанию можно изменить через свойство grid-auto-flow: .

    Выравнивание элементов. Элементы внутри ячейки можно выравнивать по горизонтали/вертикали. Выравнивается вложенный в ячейку элемент, а не сама ячейка. Например, в контейнере есть вложенный элемент первого уровня (это ячейка), внутри него есть «текст» или какой-то «div» (текст или div — это реальный элемент) выравнивание элемента выровняет вложенный в ячейку элемент внутри ячейки (размеры ячейки при этом не изменятся).

    Несколько элементов в одной ячейке. В одной ячейке или области можно разместить несколько элементов. Чтобы указать кто «выше» (важнее) и кто «ниже» (неважный), нужно использовать css свойство z-index: .

  • Расширение сетки. Сколько колонок/рядов имеет сетка обычно указывается сразу, но если разместить элемент за пределами сетки (указать ему номер ряда/ячейки, который выходит за пределы сетки), тогда сетка автоматически расширяется и создаются дополнительные линии (колонки/ряды).
  • меню

    CSS свойства Gr >

    Включает grid свойство для элемента. Под это свойство попадает сам элемент и вложенные в него элементы: затрагиваются только потомки первого уровня — они станут элементами grid контейнера.

    • grid — элемент растягивается на всю ширину и имеет свое полное пространство среди окружающих блоков. Происходит перенос строк в начале и в конце блока.
    • inline-grid — элемент обтекается другими элементами. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.

    grid и inline-grid отличаются тем что по-разному взаимодействуют с окружающими элементами, подобно display:block и display:inline-block .

    Указывают из скольки рядов (строк) и скольки колонок состоит сетка и какие у них размеры. Т.е. указывается сразу два понятия: сколько и какой размер.

    В значении через пробелы указываются размеры: высота ряда (rows) или ширина колонки (columns). Сколько раз будет указан размер, столько будет рядов/колонок.

    размер — это высота ряда или ширина колонки, может быть:

    px, em, %, vh, vw — размер абсолютный (px, pt), относительный (em, vw, vh) или в % от ширины/высоты контейнера.

    fr (фракция — свободное место в сетке) — специальная единица измерения в grid. Свободное место в контейнере делится на фракции, так если одной колонке указать 1fr , а другой 2fr , то вторая будет больше первой в 2 раза и обе они заполнят все свободное пространство. Аналог flex-grow: у флексов. Тут можно также указывать дробные значения: 0.5fr, 2.3fr .

    min-content — наименьший размер контента. Для текста это ширина самого длинного слова или неразрывного фрагмента.

    max-content — наибольший размер контента. Для текста это длина самой большой строки без переносов.

    auto — размер ряда/колонки подстраивается под размеры элементов, так, чтобы уместился самый большой из них. Не дает сжиматься меньше min-width или min-height самого широкого или высокого элемента соответственно. Не дает растягиваться больше, чем max-content . Если в контейнере есть свободное место, то размер может растянуться до конца контейнера.

    fit-content( max ) — функция которой передается макс. размер. Если контент меньше этого размера, ведет себя как auto , если больше, то ограничивает размер ряда/колонки до указанного в параметре max.

    line-name (имя линии) — перед размером можно указать (создать) имя для линии (ряда/колонки). Имя указывается в квадратных скобках [имя] 100px . Также можно указать сразу несколько имен через пробел внутри квадратных скобок: [имя еще_имя] 100px . Символы в имени можно использовать любые, в том числе кириллицу.

  • last-name (последнее имя) — указанное имя станет именем начальной линии ряда/колонки, но ряд/колонка состоит из двух линий (они ведь имеют размер). Так имя линии является именем начала одной колонки (ряда) и именем конца предыдущей колонки (ряда). И так вот заполняется сетка, но в конце остается ряд/колонка и указанное для неё имя это имя только начальной линии этого ряда/колонки, а у конечной линии имени нет. Такое имя последней линии можно указать в конце. Т.е. получается так: [имя] 100px [имя2] 100px [последнее-имя] .
  • У двух этих свойств есть сокращенные записи:

    Примеры:

    Создадим сетку (контейнер) с тремя колонками и тремя рядами последняя колонка и ряд будут иметь одинаковое имя ‘main’

    Если не указать имя, то ряд/колонка автоматом получает два порядковых числовых имени: положительное и отрицательное:

    Укажем конкретные имена (обратите внимание как указывается имя для последней линии):

    Меню может иметь не одно, а несколько имен, этот пример добавляет два имени row1-end и row2-start :

    Если в перечисление размеров колонок есть повторяющиеся части, то можно использовать функцию repeat() :

    Если несколько строк имеют одно и то же имя, на них можно ссылаться по имени и порядковому числу:

    fr позволяет указать размер относительный оставшегося свободного места в контейнере. В этом примере свободное место в контейнере делится на число указанных фракций (у нас 3) и для каждой определяется ширина. Так если ширина контейнера 90px то каждая колонка будет шириной по 30px.

    Свободное пространство высчитывается после того как посчитаны жесткие размеры (включая разрывы). В этом примере размер свободно пространства высчитывается как ширина контейнера минус 50px.

    Позволяет создать визуальный шаблон сетки. В этом свойстве задаются имена ячейкам, а затем элементы привязываются к этим именам через свойство grid-area: указываемое для отдельного элемента.

    Синтаксис шикарен, потому что визуально показывает как выглядит сетка:

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

    «имя имя имя2» — если указать одно и тоже имя несколько раз подряд, то имя объединит ячейки и мы получим область (большую ячейку). Объединять ячейки таким способом можно не только внутри ряда, но и между рядами.

    . (точка) — указывается вместо имени и обозначает ячейку которую нужно пропустить (пустую ячейку). Можно использовать несколько точек подряд, пока между ними нет пробела они будут считаться за одну.

  • none — область не определена
    • Символы в имени можно использовать любые, в том числе кириллицу.

    Каждый ряд должен иметь одинаковое количество ячеек.

    При использовании этого метода линии (включая последнюю линию) получают имена автоматически. Например, если область называется bar , то имя начальной линии ряда и колонки у этой области будет bar-start , а имя последней bar-end . Это значит, что некоторые линии будут иметь много имен. Например крайняя левая линия из примера ниже (шаблон страницы) будет иметь сразу три имени: header-start , main-start и footer-start .

    Такая же логика работает и наоборот, если линиям указать имена дом-start и дом-end , то все что находится межу этими линиями превращается в область (ячейку) с именем дом .

    grid-template-areas: также можно указывать в первом значении свойств:

    Примеры:

    Шаблон страницы. Создадим сетку с четырьмя колонками и тремя рядами. Весь верхний ряд будет шапкой (header), средний ряд будет контентом (main) и сайдбаром (sidebar), между которыми оставим место (.). И последний рад будет подвалом (footer).

    Размеры и области можно указывать одновременно:

    Позволяет разом указать три свойства: grid-template-rows , grid-template-columns и grid-template-areas .

    Примеры:

    В первом параметре (в рядах) можно указать шаблон (области). 25px — это высота ряда.

    Также можно указывать имена для линий ряда:

    Макет «Святой Грааль» при помощи CSS Gr >Jun 5, 2020
    6 minute read

    Данный материал является вольным переводом статьи:
    Ire Aderinokun The Holy Grail Layout with CSS Grid

    Материал вычитывал: Михаил Синяков

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

    CSS Grid Layout реально сложен, даже больше, чем Flexbox. Он имеет 17 новых свойств и вводит множество новых концепций на всем пути написания CSS. В попытке понять новую спецификацию, я использовала модуль для создания макета «Святой Грааль».

    Что такое макет «Святой Грааль»?

    Святой Грааль это макет, который состоит из четырех разделов — header, footer, основное содержимое и две боковых колонки, по одной с каждой стороны. Макет так же придерживается следующих правил:

    • «Плавающая» ширина центральной части и фиксированная ширина сайдбаров
    • Центральная часть в разметке должна идти раньше, чем два сайдбара (но после header’а)
    • Все три колонки должны быть одинаковой высоты, вне зависимости от содержимого
    • Футер должен быть всегда прижат к низу, даже если контент не заполняет вьюпорт
    • Макет должен быть отзывчивым, все разделы должны схлопываться в один столбец на маленьких экранах

    Сделать такое при помощи обычного CSS без хаков довольно сложно.

    Решение с использованием CSS Grid

    Вот такое решение я придумала используя CSS Grid. Во-первых, разметка:

    И CSS, всего 31 строка!

    Разбор

    Как я уже упоминала, макет сделанный при помощи CSS Grid может быть очень сложным. Однако для создания этого макета я использовала только 4 из 17 новых свойств.

    • grid-area
    • grid-template-areas
    • grid-template-columns
    • grid-template-rows

    Мое решение, по созданию макета «Святой Грааль» при помощи CSS Grid можно разбить на пять шагов.

    1. Определение сетки

    Первое, что мы хотим сделать, это определить области сетки, к которым мы можем обратиться через псевдоним. Делается это при помощи свойства grid-area .

    Затем, используя свойство grid-template-areas мы можем расположить элементы на сетке интуитивным и визуальным способом. Свойство grid-template-areas принимает список из строк разделенных пробелами. Каждая строчка представляет собой ряд. В каждой строке, у нас есть список областей сетки разделенных пробелами. Каждая область сетки занимает один столбец. Так что, если мы хотим, чтобы область охватила два столбца мы определяем ее дважды.

    В макете «Святой Грааль» у нас есть 3 столбца и 3 ряда. Header и footer занимают 3 колонки, в то время как другие области охватывают по 1 колонке каждый.

    С помощью этой разметки мы получим следующий результат.

    2. Определение ширины столбцов

    Далее, мы хотим определить ширину столбцов. Она определяется при помощи свойства grid-template-columns . Это свойство принимает разделенный пробелами список. Поскольку у нас 3 колонки, то и ширину мы определяем 3 раза.

    В макете «Святой Грааль» мы хотим видеть 2 сайдбара по 150 пикселей каждый.

    Также мы хотим, чтобы средний столбец занимал оставшуюся часть пространства. Мы можем сделать это при помощи новой единицы измерения fr . Она обозначает долю свободного пространства в сетке. В нашем случае добавляется еще и ширина сайдбаров, в сумме 300px.

    Сейчас наш макет выглядит следующим образом.

    3. Определение высоты рядов

    Теперь нам нужно определить высоту рядов. Подобно тому, как мы определяем ширину столбцов при помощи grid-template-columns , мы определяем высоту при помощи grid-template-rows . Это свойство принимает разделенный пробелами список содержащий высоту для каждого ряда в нашей сетке. Хотя мы можем записать его на одной строке, я думаю, лучше и визуально более понятно, будет написать по одному ряду в строку.

    Таким образом, высота header будет равняться 100px, высота footer 30, а средний ряд (основное содержимое и две боковые панели) займет оставшуюся свободную часть.

    4. Прижатый footer

    В данном макете мы хотим, чтобы футер всегда находился в нижней части экрана, даже если содержимого на странице мало. Для этого установим минимальную высоту элемента .hg равной высоте вьюпорта.

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

    5. Делаем макет отзывчивым

    И, наконец, мы хотим сделать макет отзывчивым. На небольших устройствах все элементы сетки должны отображаться в одном столбце, один за другим. Для этого нам необходимо переопределить 3 свойства, которые мы определили ранее grid-template-areas , grid-template-columns и grid-template-rows .

    Во-первых, мы хотим чтобы все элементы в сетке были в одном столбце в определенном порядке.

    Далее, мы хотим чтобы все элементы растянулись на всю ширину сетки.

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

    Вот и все! Вы можете посмотреть демо по этой ссылке, а так же исходники.

    Что такое Grid Layout.

    Что такое Grid Layout.

    Здравствуйте! Этой статьей я начинаю цикл материалов посвященных Grid Layout. В этой статье я расскажу что такое Grid Layout и Grid Container. Grid Layout это такой модуль CSS3, который позволяет выстраивать элементы на странице сеткой или таблицей. Также как и модуль Flexbox Grid Layout позволяет задавать положение элементов, только в отличие от флекса он может сразу поизиционировать элемент в 2-х осях как по вертикали так и по горизонтали в отличие от флексбокса, который может только в какой-то одной оси об остальных отличиях флксбокса и грида читайте здесь.

    Ну а спецификацию на модуль Grid Layout можно почитать на сайте www.w3.org/TR/css-grid-1/.

    Поддержка браузерами Grid Layout

    Конечно при использовании следует учитвать, что технология Grid Layout довольно молодая и лишь недавно современные браузеры начали ее поддерживать. Ниже можно посмотреть какими браузерами она поддерживается:

    • Google Chrome — с 57
    • Mozilla Firefox — с 52
    • Opera — с 44
    • Safari — с 10.1
    • iOS Safari — с 10.3

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

    Как создать grid-контейнер.

    Рассмотрим компоновку Gr >display одно из 2 значений: grid или inline-grid . Давайте лучше разберем на примере.

    Из примера видно, что контейнер с классом grid имеет свойство display:grid. В нем располагаются 5 grid-элементов.

    А вот если изменить значение grid на inline-grid то элемент будет строчный

    Как видно из примера в этом случае грид-элемент занимает только ту площадь, которая необходима для его размещения.

    Для закрепления посмотрите видео что такое grid layout.

    Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

    CSS Grid Layout Module: основные концепции и примеры использования

    Модуль CSS3 Grid Layout — это один из самых интересных, на мой взгляд, модулей в семействе CSS3. Официальная история модуля в виде черновика спецификации насчитывает сегодня чуть менее года. О предварительном анонсе еще с названием CSS Grid Alignment на TPAC 2010 Владимир Юнев писал еще в декабре 2010. Надо также отметить, что с чуть другим названием и несколько отличным синтаксисом, но с той же сутью, он был заявлен в качестве WD еще в 2007г. Сегодня работы по доводке модуля идут полным ходом, предварительная реализация уже есть в Internet Explorer 10 и есть надежда, что поддержка новых возможностей также появится в будущих версиях других популярных браузеров.

    Зачем нужен Grid Layout?

    Задача, которую решает модель CSS3 Grid Layout, очень проста и понятна любому веб-верстальщику (да и не только ему): предоставить удобный механизм расположения контента по виртуальной сетке.
    В отличие от старых табличных подходов, основанных на использовании table, здесь не замусоривается семантика документа и представление четко отделено от содержания.

    В отличие от различных вариаций блочной верстки со становящимися при сколь-нибудь сложной структуре безумными и многоэтажными float’ами в сочетании с вручную просчитанными отступами, здесь описание стилей становится тривиально простым и прозрачным. В отличии от абсолютного позиционирования с привязкой к координатам, здесь сохраняется гибкость. В отличие от популярных сегодня css/js-библиотек для разметки по сетке путем указания соответствующих классов (взять хоть те же bootstrap или yui css grids), здесь не замусоривается привязка классов.

    Сплошное удовольствие! Осталось только дождаться широкой поддержки 🙂 Впрочем, если вы планируете делать приложения в стиле Metro для Windows 8 на html/js, ключевые возможности, описываемые в модуле CSS3 Grid Layout, уже работают — и можно двигаться вперед, используя удобные и практичные механизмы.

    Основы

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

    которое необходимо разнести на три колонки примерно вот так:

    Это классическая задача, поэтому я не буду останавливаться на том, как она решается в случае использования уже традиционных подходов для многоколоночной блочной верстки. Давайте посмотрим, что можно сделать с помощью Grid Layout (я пропускаю браузерные префиксы в примерах, однако, на практике их нужно добавлять — для IE это -ms-).

    Вот пример кода на CSS:

    section <
    display : gr >;
    gr >: 150px 1fr 200px ;
    gr >: 50px 1fr 50px ;
    >

    section header <
    gr >: 2 ;
    gr >: 1 ;
    >

    section nav <
    gr >: 1 ;
    gr >: 2 ;
    >

    section article <
    gr >: 2 ;
    gr >: 2 ;
    >

    section as > <
    gr >: 3 ;
    gr >: 2 ;
    >

    section footer <
    gr >: 2 ;
    gr >: 3 ;
    >

    В самом простом варианте все, что нужно сделать, сводится к тому, чтобы указать в контейнере (section), что содержимое внутри него нужно располагать по сетке и задать виртуальную сетку, используя свойства grid-columns и grid-rows (чуть ниже я расскажу о том, какие значения они принимают). Далее для каждого элемента внутри достаточно сказать, где он должен располагаться.

    И это все! Итого:

    1. Виртуальная сетка: grid-columns и grid-rows в контейнере
    2. Размещение элемента: grid-column и grid-row.

    Теперь давайте разбираться в деталях и дополнительных возможностях.

    Виртуальная сетка

    Треки: строки и столбцы

    Для создания виртуальной сетки, по которой в дальнейшем размешаются элементы, необходимо описать треки сетки (Grid Tracks) — строки и столбцы внутри сетки:

    Линии сетки

    Треки располагаются между линиями сетки (Grid Lines), которые, в свою очередь, находятся справа-слева и сверху-снизу от каждого трека:

    Чтобы задать, как именно элемент будет размещен по сетке, необходимо указать, к какой линии по вертикали и горизонтали он будет привязан:

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

    Растяжение на несколько ячеек

    Чтобы растянуть элемент на несколько ячеек сетки, можно использовать свойства grid-row-span и grid-column-span:

    По умолчанию, оба свойства установлены в значение 1, что соответствует растяжению доступного пространства от указанной линии до следующей (+1).

    Повторяющиеся треки

    Часто бывает так, что предполагаемая для использования сетка содержит какой-то характерный шаблон:

    Было бы удобным описывать такие сетки в более компактном и прозрачном виде — и такая возможность есть! Пример выше можно описать так:

    Сам шаблон описывается в круглых скобках, после чего в квадратных указывается количество повторений.

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

    Единицы измерения

    Как вы уже могли заметить выше, местами я использовал необычное значение при указании размеров некоторых столбцов и строчек — 1fr. Об этом и других возможных значениях при указании длины мы сейчас и поговорим.

    При описании ширины колонок и высоты строк (размеров треков) можно использовать следующие единицы и значения:

    • линейные размеры — стандартные единицы указания длины, определенные в модуле CSS3 Values and Units, например, pt, px, em, vw и т. д.;
    • проценты — размер трека в процентах от размеров контейнера с сеткой (хотя если высота или длина сетки зависит от контента, результат будет неопределенным);
    • доли (fraction) — неотрицательное число с последующей единицей измерения fr, размер каждой доли берется пропорциональным указанному числу (см. подробнее ниже);
    • max-content — ключевое слово для указания максимальной длины из максимальных длин элементов в треке;
    • min-content — ключевое слово для указания максимальной длины из минимальных длин элементов в треке;
    • minmax(min, max) — задает диапазон значений (принцип работы можно описать как minmax(p, q) = max(p, min(fill-available, q))
      — максимум из нижнего порога и минимума доступного пространства и верхнего порога);
    • auto — ключевое слово, эквивалентное minmax(min-content, max-content).

    Давайте попробуем разобраться, как работают доли (fraction value)? Сетка занимает некоторое пространство по ширине и высоте. Оно может зависеть от контента, быть жестко фиксированным или занимать все доступное пространство во внешнем контейнере. Далее, при описании треков части колонок и строк вы можете явно задать, какого размера они должны быть, для еще какой-то части вы можете указать, что их длина зависит от контента.

    Теперь, если из доступной длины, отведенной под сетку по вертикали или горизонтали, вычесть сумму всех таких явных или «контентных» длин, оставшееся пространство распределяется между остальными треками пропорционально указанным в них долях (размер доли, деленный на сумму всех таких долей):

    На примере выше это три столбца c ширинами в соотношении 2:1:1 и две строки с высотами в соотношении 5:2.

    Пример

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

    Здесь определяются следующие линии (треки, они же колонки в данном случае):

    1. Стартовая первая линия.
    2. Линия в 100px от первой.
    3. Еще одна линия на расстоянии 1/2 оставшегося после всех рассчетов пространства — от второй линии.
    4. И еще одна линия, чье расстояние от третьей равно максимальному из размеров контента элементов в колонке.
    5. Наконец, последняя линия, расположенная от четвертой на расстоянии, равном либо минимальной длине элементов в колонке, либо 1/2 оставшегося пространства, смотря, что больше.

    Тут есть еще небольшой нюанс относительно учета долей, которые оказались внутри функции minmax: они учитываются в общей сумме долей только если обозначены в максимальной позиции. Доли, обозначенные в минимальной позиции, считаются равными 0px. Подробнее тонкости рассчета смотрите в спецификации.
    Следующим шагом мы попробуем разобраться, как элементы размещаются между линиями сетки (внутри ячеек).

    Привязка элементов

    Теперь, когда элементы «привязаны» к линиям сетки, возникает естественный вопрос: а как же они располагаются между линиями?

    Привязка элементов к границам ячейки контролируется с помощью свойств grid-column-align и grid-row-align. Для управления можно использовать следующие значения:

    Думаю, действия очевидны из названия, отмечу лишь, что в каждом случае речь идет о позиционировании элемента по его margin-боксу. По умолчанию используется значение stretch.

    Привязка в колонках (по горизонтали) соответствует направлению текста (например, в арабском языке start будет справа, а end слева). Привязка в строках (по вертикали) совпадает с направлением потока блоков (это, кстати, означает, что в некоторых восточно-азиатских языках строки и столбцы могут поменяться местами).

    Управление слоями

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

    Прежде всего, важно понять следующий нюанс: элементы, размещаемые внутри сетки, не влияют напрямую на расположение друг друга. Если вы десять элементов привяжете, скажем, ко второй линии по горизонтали и третьей по вертикали, то по умолчанию они все расположатся один на другим так, как будто каждый из них привязан к соответствующему углу. Элементы могут влиять только на размеры треков, если они завязаны, в свою очередь, на размеры контента.

    Чтобы управлять порядком отображения таких слоев, текущая версия спецификации расширяет возможности z-index, позволяя управлять слоями элементов внутри сетки.

    Замечание: в предыдущей версии спецификации, на которую опирается текущая версия IE10 (platform preview 5), для этих целей было определено отдельное свойство grid-layer, чтобы не конфликтовать с z-index, однако, далее в процессе обсуждений в рабочей группе это решение было пересмотрено.

    #grid <
    display : gr >;
    gr >: ( 1fr ) [ 3 ] ;
    gr >: ( 1fr ) [ 4 ] ;
    >

    #B <
    gr >: 1 ;
    gr >: 1 ;
    gr >: 2 ;
    /* grid-layer: 10; */
    z-index : 10 ;
    margin-top : 10px ;
    >

    #C <
    gr >: 1 ;
    gr >: 1 ;
    gr >: 2 ;
    margin-left : 50px ;
    >

    #D <
    gr >: 2 ;
    gr >: 3 ;
    gr >: 2 ;
    gr >: 2 ;
    margin : 10px 0 0 10px ;
    >

    #E <
    gr >: 2 ;
    gr >: 2 ;
    /* grid-layer: 5; */
    z-index : 5 ;
    margin : -20px ;
    >

    css3 grid library

    Чтобы начать работать с сетками в браузерах, (еще) не поддерживающих модуль CSS Grid Layout, можно воспользоваться js-библиотекой eCSStender и расширением CSS3 Grid Alignment, обеспечивающими поддержку следующих свойств:

    • display: grid
    • grid-columns & grid-rows
    • grid-column & grid row
    • grid-column-span & grid-row-span

    Пример работы можно посмотреть тут.

    Немного о будущем, или какие еще возможности описаны в модуле

    Наконец, давайте немного приоткроем двери в будущее и подглядим, какие еще возможности готовятся в модуле CSS3 Grid Layout.

    Учтите, что на сегодня упоминаемые ниже возможности только описаны в черновике спецификации, но еще не имеют поддержки среди выпущенных браузеров (включая предварительные версии). Они также могут измениться в будущем в зависимости от реакции сообщества и рекомендаций рабочей группы CSS.

    Указание конечной линии для привязки элемента

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

    В отличие от механизма «span», который говорит, на сколько ячеек элемент должен растянуться по горизонтали или вертикали, данная возможность позволяет четко указать, на какой линии элемент должен закончиться. Это также удобно использовать в сочетании с возможностью именования отдельных линий сетки.

    Именованные линии сетки

    Для удобства линиям можно давать названия. Это делается вставкой в соответствующих местах строковых значений при описании треков (можно давать несколько имен, если это имеет практический смысл, например, с точки зрения семантики разметки):

    Далее при описании привязки элементов можно ссылаться на эти имена:

    #header <
    gr >: «content» ;
    gr >: «header» ;
    >

    #article <
    gr >: «content» ;
    gr >: «content» ;
    >

    Также спецификация вводит 4 заранее именованных линии — вертикальные и горизонтальные start и end, фактически, обрамляющие всю сетку. Это полволяет, к примеру, расположить элемент «от второго столбца и до последнего», не задумываясь об общем количестве столбцов.

    #menu <
    gr >: 1 ;
    gr >: start end ;
    >

    #footer <
    gr >: 2 end ;
    gr >: 3 ;
    >

    Именованные ячейки и шаблоны

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

    gr >: auto minmax ( min- content , 1fr ) ;
    gr >: auto minmax ( min- content , 1fr ) auto auto ;
    >

    При этом для размещения элемента с прявязкой к той или иной виртуальной ячейке достаточно сослаться на нее соответствующим правилом:

    Такой подход оказывается особенно удобным, если в зависимости от различных условий, например, разрешения экрана, вам нужно менять расположение элементов и даже переделать саму сетку. В подобной ситуации Grid Layout хорошо сочетается с Media Queries:

    @media (orientation: portrait) <
    #grid <
    display : gr >;
    gr >: «ln»
    «ma»
    «ba»
    «ff» ;

    gr >: auto minmax ( min- content , 1fr ) ;
    gr >: auto minmax ( min- content , 1fr ) auto auto ;
    >
    >

    @media (orientation: landscape) <
    #grid <
    display : gr >;
    gr >: «ln»
    «ma»
    «mb»
    «sf» ;

    gr >: auto minmax ( min- content , 1fr ) ;
    gr >: auto minmax ( min- content , 1fr ) auto auto ;
    >
    >

    Обратите внимание, что привязка самой статьи к именованной ячейке при этом не меняется. (Ручки уже чешутся начать использовать, однако, ждем, когда это все реализуют в браузерах.)

    Заключение

    Я постарался дать в статье обзор ключевых возможностей модуля CSS3 Grid Layout. Надеюсь, они вдохновляют вас не менее, чем меня. 🙂

    Напомню, что модуль продолжает развиваться, редакторы собирают отзывы от внешнего сообщества и внутри рабочей группы CSS. На действующую реализацию основного функционала можно посмотреть в Internet Explorer 10. Несколько интересных примеров можно найти на ietestdrive.com: The Grid System и Hands On: CSS3 Grid Layout:

    Также еще раз отмечу, что возможности Grid Layout, уже поддерживаемые движком IE10, также можно использовать при разработке приложений в стиле Metro на HTML/JS для Windows 8.

    Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

    Gr >Последнее обновление: 09.05.2020

    Grid Layout представляет специальный модуль CSS3, который позволяет позиционировать элементы в виде сетки или таблицы. Как и Flexbox, Grid Layout представляет гибкий подход к компоновке элементов, только если flexbox размещает вложенные элементы в одном направлении — по горизонтали в виде столбиков или по вертикали в виде строк, то Grid позиционирует элементы сразу в двух направлениях — в виде строк и столбцов, образуя тем самым таблицу.

    Полностью спецификацию модуля Grid Layout можно посмотреть на странице www.w3.org/TR/css-grid-1/.

    Поддержка браузерами

    При использовании Grid Layout следует учитывать, что только относительно недавно производители браузеров стали внедрять поддержку этого модуля в свои браузеры. Ниже приводится для браузеров список версий, начиная с которых была внедрена полноценная поддержка Grid Layout:

    Google Chrome — с версии 57

    Mozilla Firefox — с версии 52

    Opera — с версии 44

    Safari — с версии 10.1

    iOS Safari — с версии 10.3

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

    Кроме того, IE (начиная с версии 10) и Microsoft Edge имеет лишь частичную поддержку модуля. А Android Browser, Opera Mini, UC Browser вовсе ее не имеют.

    Создание grid-контейнера

    Основой для определения компоновки Gr >display одно из двух значений: grid или inline-grid .

    Создадим простейшую веб-страницу, которая применяет Grid Layout:

    Для контейнера grid-container установлено свойство display:grid . В нем располагается пять grid-элементов.

    Если значение grid определяет контейнер как блочный элемент, то значение inline-grid определяет элемент как строчный (inline):

    В этом случае весь грид занимает только то пространство, которое необходимо для размещения его элементов.

    Топ-пост этого месяца:  Урок 10. Библиотека JQuery UI (User Interface). Виджеты Selectmenu и Spinner
    Добавить комментарий