Шаблоны областей сетки

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

.box1 {
  grid-area: 1 / 1 / 4 / 2;
}

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

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

• заголовок
• подвал
• боковая панель
• основное содержимое

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

.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}

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

.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd   hd   hd   hd   hd   hd"
    "sd sd sd main main main main main main"
    "ft ft ft ft   ft   ft   ft   ft   ft";
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

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

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

.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd   hd   hd   hd   hd   hd"
    "sd sd sd main main main main main main"
    ".  .  .  ft   ft   ft   ft   ft   ft";
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

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

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

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

.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd   hd   hd   hd   hd   hd"
    "sd sd sd main main main main main main"
    "sd sd sd  ft  ft   ft   ft   ft   ft";
}

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

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

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

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

.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}

.wrapper {
  display: grid;
  grid-auto-rows: minmax(100px, auto);
  grid-template-columns: 1fr;
  grid-template-areas:
    "hd"
    "main"
    "sd"
    "ft";
}

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

@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas:
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      "sd sd sd  ft  ft   ft   ft   ft   ft";
  }
}
@media (min-width: 700px) {
  .wrapper {
    grid-template-areas:
      "hd hd hd   hd   hd   hd   hd   hd hd"
      "sd sd main main main main main ft ft";
  }
}

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

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

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

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

* {
  box-sizing: border-box;
}

.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
}

.media .image {
  grid-area: img;
  background-color: #ffd8a8;
}

.media .text {
  grid-area: content;
  padding: 10px;
}

<div class="media">
  <div class="image"></div>
  <div class="text">
    This is a media object example. We can use grid-template-areas to switch
    around the image and text part of the media object.
  </div>
</div>

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

* {
  box-sizing: border-box;
}

.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
}

.media.flipped {
  grid-template-columns: 3fr 1fr;
  grid-template-areas: "content img";
}

.media .image {
  grid-area: img;
  background-color: #ffd8a8;
}

.media .text {
  grid-area: content;
  padding: 10px;
}

<div class="media flipped">
  <div class="image"></div>
  <div class="text">
    This is a media object example. We can use grid-template-areas to switch
    around the image and text part of the media object.
  </div>
</div>

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

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

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

Два сокращения для контейнера сетки — это явное сокращение для сетки grid-template и сокращение для определения сетки grid.

Свойство grid-template устанавливает следующие свойства:

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

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

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

.wrapper {
  display: grid;
  grid-template:
    "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

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

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

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

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

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

.wrapper {
  display: grid;
  grid:
    "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

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

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