Grid template areas не работает

Понимание CSS Grid (3 часть): Grid-области

Приветствую! Представляю вашему вниманию перевод статьи «Understanding CSS Grid: Grid Template Areas» автора Rachel Andrew

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

Статьи из данной серии:

Примечание от переводчика
В интернете очень много как статей, так и руководств о технологии CSS Grid. Но порой в материалах Rachel Andrew доступно освещаются те моменты, которым в других руководствах уделяется недостаточно внимания.

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

Описание разметки с помощью свойства ‘grid-template-areas’

Свойство grid-template-areas принимает в виде значения одну или несколько строк. Каждая строка (заключённая в кавычки) представляет строку сетки. Свойство grid-template-areas можно либо использовать в сетке, которая уже определена с помощью grid-template-rows и grid-template-columns , либо описать весь макет только с помощью него, но в этом случае высота всех строк будет определяться автоматически.

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

Размещение элементов на получившейся сетке осуществляется путём присвоения свойству grid-area соответствующего названия области, которую данный элемент должен занять. Следовательно, если я хочу поместить элемент с классом test в область сетки one , я использую следующий CSS:

Увидеть это в действии можно на примере CodePen, размещённого ниже. У меня есть четыре элемента (с классами от одного до четырёх), которые присваиваются соответствующим grid-областям с помощью свойства `grid-area’ и поэтому отображаются на сетке в нужном блоке.

Если воспользоваться Grid-инспектором браузера Firefox, можно увидеть названия областей и линии сетки, демонстрирующие, что каждый элемент действительно занимает две строки и две колонки – и всё это без необходимости использовать позиционирование элементов по линиям сетки.

Правила использования ‘grid-template-areas’

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

Правило №1: Описывайте всю сетку

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

Если вы хотите оставить ячейку пустой, просто укажите вместо названия одну или несколько точек, не разделяя их пробелом ( ‘.’ или ‘. ‘ ).

Следовательно, если я изменю значение свойства grid-template-areas на следующее:

то теперь у нас есть две незаполненные ячейки. Элемент «three» отображается только в последней строке сетки.

Правило №2: Одно имя – одна область

Область с определённым названием допускается определять только один раз. Это значит, что вы не можете поместить какое-то содержимое сразу в несколько мест на сетке, задав для разных областей одинаковое имя. Таким образом, следующее значение будет некорректным и приведёт к тому, что свойство полностью будет проигнорировано, так как мы продублировали область с именем three :

Правило №3: Только прямоугольные области

Нельзя создавать непрямоугольные области, следовательно, данное свойство нельзя использовать для создания ‘L’ или ‘T’-образных областей – это также делает всё свойство некорректным и приводит к его игнорированию:

Форматирование строк

Мне нравится оформлять значение свойства grid-template-areas так, как изображено на примере выше, где каждая строка представляет строковый трек сетки. Это даёт визуальное представление о том, как будет выглядеть итоговый макет.

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

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

Тем не менее, вполне допустимой является и запись всех строк в одну линию, как в следующем примере:

Объяснение свойств ‘grid-template-areas’ и ‘grid-area’

Причина, по которой каждая область должна быть прямоугольной, заключается в том, что она должна быть той же формы, которую можно задать с помощью размещения элементов по grid-линиям. То есть, приведённый выше пример мы вполне могли бы воспроизвести с использованием grid-линий, как показано в CodePen ниже. В нём я создала сетку тем же способом, что и раньше. Но в этот раз для размещения элементов я использовала grid-линии, добавляя свойства grid-column-start , grid-column-end , grid-row-start и grid-row-end .

Примечание: если вы прочтёте предыдущую статью из данной серии «Понимание CSS Grid (2 часть): Grid-Линии», то узнаете, что с помощью сокращённого свойства grid-area можно задать все четыре линии в одном свойстве.

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

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

Свойство grid-area интересно тем, что может принимать как номера линий, так и их имена.

Использование ‘grid-area’ с номерами линий

Если в свойстве grid-area указываются номера линий, то линии нужно указывать в порядке, описанном выше.

Если же в данном свойстве вы пропускаете какие-то номера, они принимают значение auto , что значит, что область будет занимать один трек (что является поведением по умолчанию). Таким образом, следующий CSS задаст элементу свойство grid-row-start: 3 , а значения остальных свойств позиционирования установит на auto . Следовательно, элемент будет автоматически размещён на 3 строковой линии, в первом доступном колоночном треке, и будет занимать один строковый трек и один колоночный трек.

Использование ‘grid-area’ с именами линий

Если вы используете идентификатор (именно так в Grid-разметке называется именованная область), то свойство grid-area также допускает возможность указать четыре линии. Если у вашей сетки есть именованные линии, как описано в первой статье из данной серии, вы можете применять имена линий так же, как и их номера.

Но в данном случае, когда мы используем имена линий, поведение при их пропуске для свойства grid-area отличается от поведения при использовании номеров.

Ниже я создала сетку с именованными линиями и использовала grid-area для размещения элемента (опустив последнее значение):

Это значит, что мы не указали имя линии для свойства grid-column-end . В спецификации говорится, что в этой ситуации свойство grid-column-end должно использовать то же значение, что и у свойства grid-column-start . Если значения этих двух свойств одинаковые, то конечная строка отбрасывается и, по сути, значение устанавливается на auto , поэтому элемент занимает один трек, как и в случае с использованием номеров линий.

То же самое происходит, если опустить третье значение свойства grid-row-end . Оно принимает то же значение, что и grid-row-start и следовательно, становится auto .

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

Это объясняет, почему свойство grid-area работает с единственным значением, представляющим название области.

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

Если имя области назначается свойству стартовой линии (-start) , то это означает начальную точку колонки или строки. Если же имя области назначается свойству конечной строки (-end) , – это соответственно означает конец колонки или строки.

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

Принцип, по которому в Grid-разметке работает именование, достаточно умный и позволяет применять интересные решения, которые я описала в моих статьях «Именование в CSS Grid» и «Editorial Design Patterns With CSS Grid And Named Columns».

Наложение элементов при использовании ‘grid-template-areas’

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

В приведённом ниже CodePen-примере я добавила дополнительный элемент и расположила его над другими элементами сетки, указывая grid-линии.

Вы также можете использовать имена линий, определенные при создании колонок и строк. Более того, вам также будут доступны названия линий, созданные при формировании областей. Мы уже видели, как определение названия для одной области даёт имена четырём линиям по краям этой области. Вы также получаете линию в начале и конце каждой области с суффиксами -start и -end , добавляемыми соответственно к начальной и конечной линии.

Следовательно, grid-область, именуемая one , имеет начальную линию, именуемую one-start и конечную линию, именуемую one-end .

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

Использование ‘grid-template-areas’ в адаптивном дизайне

Я часто работаю с созданием компонентов и вижу, что использование grid-template-areas может полезно с точки зрения возможности прямо из CSS точно увидеть, как будет выглядеть данный компонент. Это также облегчает перестроение компонента в разных контрольных точках путём простого переопределения значения свойства grid-template-areas , иногда в дополнение к изменению количества доступных колонок.

В примере ниже я определила макет компонента в виде одноколоночного макета. Далее, минимум на 600px я переопределяю количество колонок, а также значение свойства grid-template-areas , чтобы создать макет с двумя колонками. Приятной особенностью такого подхода является то, что любой, кто посмотрит на этот код, сможет понять, как работает макет.

Доступность

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

Резюмируя

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

Источник

Шаблоны грид-областей

В предыдущем обзоре мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда вы работаете с CSS Grid Layout, у вас всегда есть грид-линии, поэтому они — быстрый, прямой и надёжный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именованных, заранее определённых грид-областей. Давайте рассмотрим, как он работает, и вы скоро поймёте, почему его называют методом ascii-искусства в концепции макетов на гридах!

Имя для грид-области

Вы уже знакомы со свойством grid-area . Это то свойство, которое принимает в качестве значения номера четырёх грид-линий, определяющих расположение грид-области.

Что мы делаем, когда задаём все четыре значения? Мы определяем область, ограниченную данными грид-линиями.

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

• header
• footer
• sidebar
• основное содержимое content

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

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

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

Оставляем ячейку пустой

В данном примере мы полностью заполнили грид областями и не оставили пустого пространства. Однако, наш метод также позволяет оставлять грид-ячейки пустыми. Чтобы сделать это воспользуйтесь символом точки, ‘ . ‘. Если нам нужно отображать футер только под основным содержимым страницы, значит, мы должны оставить три ячейки под сайдбаром пустыми.

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

Охватываем несколько ячеек

В нашем примере каждая из областей охватывает несколько грид-ячеек, и получаем мы подобный эффект за счёт того, что через пробел повторяем имя этой грид-области несколько раз. Вы можете добавить дополнительные пробелы, чтобы аккуратно выравнять значения в grid-template-areas . В нашем примере мы пробелами подравняли hd и ft , чтобы они коррелировали с main .

Область, которую мы создаём подобными цепочками имён, должна быть прямоугольной. На данном этапе нельзя создать L-образную область. В спецификации говорится, что, возможно, в будущем подобная функциональность добавится. А сейчас мы можем охватывать строки так же легко, как и колонки. Например, давайте сделаем так, чтобы наш сайдбар простирался до конца футера. Для этого поменяем . на sd .

Значение grid-template-areas должно отображать законченный грид, а иначе оно невалидно (и игнорируется!). Это значит, что у вас должно быть одинаковое количество ячеек в каждой строке, а если какая-то ячейка должна быть пустой, то вместо имени в ней должна быть точка. Грид будет также невалидным, если области в нем не прямоугольные.

Переопределение грида с медиавыражениями

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

При этом определяйте имена для ваших грид-областей за пределами медиавыражений. В таком случае, область основного содержимого (content) всегда будет называться main независимо от того, где она находится на сетке.

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

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

Использование grid-template-areas для элементов UI

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

В качестве очень простого примера мы можем создать «медиа-объект». Это компонент с пространством для изображения или другого носителя с одной стороны, а контент — с другой. Изображение может отображаться справа или слева от окна.

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

Мы предоставляем области изображения имя области сетки img и содержимое текстовой области, затем мы можем выложить их, используя свойство grid-template-areas .

Отображение изображения с другой стороны окна

Возможно, нам захочется отобразить нашу коробку с изображением наоборот. Для этого мы переопределим сетку, чтобы поместить последний трек 1fr и просто переверните значения grid-template-areas .

Сокращения определения сетки

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

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

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

Два сокращения (shorthand) для контейнера сетки — это Explicit Grid Shorthand grid-template и Grid Definition Shorthand grid .

grid-template

Свойство grid-template (en-US) задаёт следующие свойства:

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

Следующий код создаёт макет, используя grid-template (en-US) , который совпадает с макетом, созданным ранее в этом руководстве.

Первое значение — это значение нашей grid-template-areas , но мы также объявляем размер строки в конце каждой строки. Это то, что делает minmax (100px, auto) .

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

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

Свойство также сбрасывает grid-gap (en-US) свойство на 0 , однако вы не можете указывать пробелы в этой сокращенности.

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

Мы снова рассмотрим другие функции, предлагаемые этом сокращением позже в этих руководствах, когда мы рассмотрим автоматическое размещение и свойство grid-auto-flow .

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

Источник