Java, UX, HTML, CSS, WEB-design

Понимание CSS Grid: области шаблона сетки

[ad_1]

  • Рэйчел Эндрю

  • Обновлено
  • 0 Комментарии

Понимание CSS Grid: области шаблона сетки

  • 11 минут чтения

  • CSS, сетка CSS, браузеры

Краткое резюме ↬

В новой серии статей Рэйчел Эндрю разбирает спецификацию CSS Grid Layout. На этот раз мы рассмотрим, как использовать grid-template-areas для размещения предметов.

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

Если вы пропустили предыдущие статьи этой серии, вы можете найти их здесь:

  • Часть 1: Создание грид-контейнера
  • Часть 2: Линии сетки
  • Часть 3: Области шаблона сетки

Описание макета с помощью grid-template-areas

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

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

grid-template-areas: "one one two two"
                     "one one two two"
                     "three three four four"
                     "three three four four";

Элементы размещаются в макете путем присвоения им имени с помощью идентификатора grid-area имущество. Поэтому, если я хочу поместить элемент с классом test в область сетки с именем oneя использую следующий CSS:

.test {
  grid-area: one;
}

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

См. пример Grid-template-areas Pen Simple от Рэйчел Эндрю (@rachelandrew) на CodePen.

См. пример Grid-template-areas Pen Simple от Рэйчел Эндрю (@rachelandrew) на CodePen.

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

Сетка из четырех элементов с выделением линий инспектором сетки Firefox.

Каждый элемент занимает две строки и два столбца.

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

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

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

Поэтому, если я изменю значение grid-template-areas следующее:

grid-template-areas: "one one two two"
                     "one one two two"
                     ". . four four"
                     "three three four four";

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

Один элемент теперь занимает только одну строку, а инспектор сетки Firefox выделяет строки.

Теперь в сетке есть пробелы

Вы можете определить каждую область только один раз, что означает, что вы не можете использовать это свойство для копирования содержимого в два места в сетке! Таким образом, следующее значение будет недопустимым и приведет к игнорированию всего свойства, поскольку мы продублировали область. three:

grid-template-areas: "one one three three"
                     "one one two two"
                     "three three four four"
                     "three three four four";

Вы не можете создать непрямоугольную область, поэтому это свойство нельзя использовать для создания области в форме буквы «L» или «T», что делает следующее значение также недействительным:

grid-template-areas: "one one two two"
                     "one one one one"
                     "three three four four"
                     "three three four four";

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

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

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

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

grid-template-areas: "one   one   two  two"
                     "one   one   two  two"
                     "..... ..... four four"
                     "three three four four";

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

grid-template-areas: "one one two two" "one one two two" "three three four four" "three three four four";
Еще после прыжка! Продолжить чтение ниже ↓

Объяснение grid-template-areas И grid-area

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

См. размещение Pen Grid Line Рэйчел Эндрю (@rachelandrew) на CodePen.

См. размещение Pen Grid Line Рэйчел Эндрю (@rachelandrew) на CodePen.

Примечание: Если вы читали мою предыдущую статью «Понимание CSS Grid: Grid Lines», вы знаете, что можно использовать grid-area как сокращение для объявления всех четырех строк одновременно.

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

  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end
.one {
  grid-area: 1 / 1 / 3 / 3;
}

.two {
  grid-area: 1 / 3 / 3 / 5;
}

.three {
  grid-area: 3 / 1 / 5 / 3;
}

.four {
  grid-area: 3 / 3 / 5 / 5;
}

То grid-area свойство интересно тем, что оно может принимать номера строк и имена строк. Также важно понимать, как он ведет себя по-разному в каждом режиме.

С использованием grid-area С номерами строк

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

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

grid-area: 3;

С использованием grid-area С идентификаторами

Если вы используете идентификатор (именно так называется именованная область в Grid Layout), то grid-area свойство также занимает четыре строки. Если у вас есть именованные линии в сетке, как описано в разделе «Понимание CSS-сетки: создание контейнера сетки», вы можете использовать эти именованные строки так же, как и пронумерованные.

Однако то, что происходит, когда вы пропускаете некоторые строки, отличается от того, когда вы используете идентификаторы, а не числа.

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

.grid {
  display: grid;
  grid-template-columns:
      [one-start three-start] 1fr 1fr
      [one-end three-end two-start four-start] 1fr 1fr [two-end four-end];
  grid-template-rows:
    [one-start two-start] 100px 100px
    [one-end two-end three-start four-start] 100px 100px [three-end four-end];;
}

.two {
  grid-area: two-start / two-start / two-end;
}

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

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

Взгляните на следующий пример CodePen о том, как каждый grid-area используется и как это затем меняет макет элемента:

См. Pen Missing idents in grid-area от Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Pen Missing idents in grid-area от Рэйчел Эндрю (@rachelandrew) на CodePen.

Тогда это объясняет, почему grid-area работает с одним значением ident, представляющим имя области.

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

.one {
  grid-row-start: one;
  grid-row-end: one;
  grid-column-start: one;
  grid-row-end: one;
}

Если линия представляет собой -start линия, затем one разрешается в начальный конец столбца или строки. Если это -end линия, затем one разрешается в конечную строку столбца или строки.

Это означает, что когда мы говорим grid-area: oneмы опустили последние три значения для grid-area стенография; все они в конечном итоге являются копиями первого значения — все в нашем случае становятся one и элемент размещается так же, как и при обычном использовании.

Способ, которым именование работает в Grid Layout, умен и позволяет использовать некоторые интересные вещи, о которых я писал в своих предыдущих статьях «Именование объектов в CSS Grid Layout» и «Редакционные шаблоны дизайна с CSS Grid и именованными столбцами».

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

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

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

См. Pen Размещение элемента с номерами строк Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Pen Размещение элемента с номерами строк Рэйчел Эндрю (@rachelandrew) на CodePen.

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

Поэтому район, названный one имеет начальные краевые линии с именем one-start и конечные краевые линии с именем one-end.

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

См. Pen Размещение элемента с неявными именами строк Рэйчел Эндрю (@rachelandrew) на CodePen.

См. Pen Размещение элемента с неявными именами строк Рэйчел Эндрю (@rachelandrew) на CodePen.

Использование областей шаблона сетки в адаптивном дизайне

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

В приведенном ниже CSS я определил макет с одним столбцом для своего компонента. Затем при минимальной ширине 600 пикселей я переопределяю количество столбцов, а также значение grid-template-areas для создания макета с двумя столбцами. В этом подходе хорошо то, что любой, кто смотрит на этот CSS, может увидеть, как работает макет!

.wrapper {
  background-color: #fff;
  padding: 1em;
  display: grid;
  gap: 20px;
  grid-template-areas:
    "hd"
    "bd"
    "sd"
    "ft";

}

@media (min-width: 600px) {
  .wrapper {
    grid-template-columns: 3fr 1fr;
    grid-template-areas:
      "hd hd"
      "bd sd"
      "ft ft";
  }
}

header { grid-area: hd; }
article {grid-area: bd; }
aside { grid-area: sd; }
footer { grid-area: ft; }

Доступность

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

Резюме

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

Переполнение и потеря данных в CSS

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

Сокрушительная редакция
(иль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Понимание CSS Grid: области шаблона сетки

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Понимание CSS Grid: области шаблона сетки

Название: Понимание CSS Grid: области шаблона сетки . Краткое описание: [ad_1] ⭐ Рэйчел . Дата публикации: 21.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»