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

Вы можете присвоить имя некоторым или всем линиям в вашей сетке при определении сетки с помощью свойств grid-template-rows и grid-template-columns. Чтобы продемонстрировать это, я воспользуюсь простым макетом, созданным в руководстве по размещению на основе линий. На этот раз я создам сетку с использованием именованных линий.

При определении сетки я именую свои линии в квадратных скобках. Эти имена могут быть любыми. Я определил имя для начала и конца контейнера, как для строк, так и для столбцов. Затем я определил центральный блок сетки как content-start и content-end, опять же, как для столбцов, так и для строк, хотя вам не нужно именовать все линии сетки. Вы можете выбрать именование только ключевых линий для вашего макета.

.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}

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

.box1 {
  grid-column-start: main-start;
  grid-row-start: main-start;
  grid-row-end: main-end;
}

.box2 {
  grid-column-start: content-end;
  grid-row-start: main-start;
  grid-row-end: content-end;
}

.box3 {
  grid-column-start: content-start;
  grid-row-start: main-start;
}

.box4 {
  grid-column-start: content-start;
  grid-column-end: main-end;
  grid-row-start: content-end;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

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

Вы можете присвоить линии более одного имени, например, для обозначения конца сайдбара и начала основного содержимого. Для этого добавьте имена в квадратные скобки, разделяя их пробелами [sidebar-end main-start]. После этого вы сможете ссылаться на эту линию с помощью любого из этих имен.

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

Хотя вы можете выбрать любое имя, если вы добавите -start и -end к линиям вокруг области, как я сделал в примере выше, сетка создаст для вас именованную область с основным именем. Взяв пример выше, у меня есть content-start и content-end как для строк, так и для столбцов. Это означает, что я получаю область сетки с именем content, и я мог бы разместить что-то в этой области, если захочу.

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

.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}
.thing {
  grid-area: content;
}

<div class="wrapper">
  <div class="thing">I am placed in an area named content.</div>
</div>

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

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

В этом примере я добавил дополнительный div с классом overlay. Мы именованные области, созданные с помощью свойства grid-area, а затем макет, созданный в grid-template-areas. Имена областей:

• hd
• ft
• main
• sd

Это даёт нам линии столбцов и строк:

• hd-start
• hd-end
• sd-start
• sd-end
• main-start
• main-end
• ft-start
• ft-end

Вы можете видеть именованные линии на изображении. Обратите внимание, что некоторые линии имеют два имени — например, sd-end и main-start относятся к одной и той же линии столбца.

Размещение overlay с помощью этих неявных именованных линий аналогично размещению элемента с использованием линий, которые мы назвали.

.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";
}

.header {
  grid-area: hd;
}

.footer {
  grid-area: ft;
}

.content {
  grid-area: main;
}

.sidebar {
  grid-area: sd;
}

.wrapper > div.overlay {
  z-index: 10;
  grid-column: main-start / main-end;
  grid-row: hd-start / ft-end;
  border: 4px solid rgb(92 148 13);
  background-color: rgb(92 148 13 / 40%);
  color: rgb(92 148 13);
  font-size: 150%;
}

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

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

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

В этом следующем примере я создаю сетку с двенадцатью равными по ширине столбцами. Перед определением размера дорожки столбца 1fr я также определяю имя линии [col-start]. Это означает, что у нас будет сетка с 12 линиями столбцов, все они будут именоваться col-start перед столбцом шириной 1fr.

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
}

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

.item1 {
  grid-column: col-start / col-start 5;
}

Вы также можете использовать ключевое слово span здесь. Мой следующий элемент будет размещен с 7-й линии с именем col-start и охватить 3 линии.

.item2 {
  grid-column: col-start 7 / span 3;
}

<div class="wrapper">
  <div class="item1">I am placed from col-start line 1 to col-start 5</div>
  <div class="item2">I am placed from col-start line 7 spanning 3 lines</div>
</div>

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

Синтаксис repeat также может принимать список дорожек, он не должен ограничиваться одним размером дорожки, который повторяется. Приведенный ниже код создаст сетку из восьми дорожек, с более узким столбцом 1fr шириной с именем col1-start, за которым следует более широкий столбец 3fr с именем col2-start.

.wrapper {
  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
}

Если ваш синтаксис повторения помещает две линии рядом, они будут объединены и дадут тот же результат, что и при присвоении одной линии нескольких имён в определении дорожки без повторения. Следующее определение создаёт четыре 1fr дорожки, у каждой из которых есть начальная и конечная линия.

.wrapper {
  grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
}

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

.wrapper {
  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end];
}

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

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
}

.item1 {
  grid-column: col1-start / col2-start 2;
}

.item2 {
  grid-row: 2;
  grid-column: col1-start 2 / span 2 col1-start;
}

<div class="wrapper">
  <div class="item1">
    I am placed from col1-start line 1 to col2-start line 2
  </div>
  <div class="item2">
    I am placed from col1-start line 2 spanning 2 lines named col1-start
  </div>
</div>

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

Если вы работаете с жестким многоколоночным макетом, например, демонстрация именованных строк в последней части этого руководства работает очень хорошо. Если вы рассматриваете системы сеток, такие как те, которые используются в фреймворках, подобных Foundation или Bootstrap, они основаны на двенадцатиколонной сетке. Затем фреймворк импортирует код для выполнения всех вычислений, чтобы убедиться, что столбцы суммируются до 100%. При использовании сетки единственный код, необходимый для нашей "сетки-фреймворка", следующий:

.wrapper {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(12, [col-start] 1fr);
}

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

<div class="wrapper">
  <header class="main-header">I am the header</header>
  <aside class="side1">I am sidebar 1</aside>
  <article class="content">I am the main article</article>
  <aside class="side2">I am sidebar 2</aside>
  <footer class="main-footer">I am the footer</footer>
</div>

Затем я могу поместить её в мой фреймворк сетки следующим образом.

.main-header,
.main-footer {
  grid-column: col-start / span 12;
}

.side1 {
  grid-column: col-start / span 3;
  grid-row: 2;
}

.content {
  grid-column: col-start 4 / span 6;
  grid-row: 2;
}

.side2 {
  grid-column: col-start 10 / span 3;
  grid-row: 2;
}

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

Этого достаточно. Мне не нужно выполнять никаких вычислений, сетка автоматически удаляет отступ в 10 пикселей между дорожками перед выделением места для 1fr дорожек столбцов. Когда вы начнете создавать собственные макеты, вы заметите, что синтаксис становится более привычным, и вы выбираете способы, которые лучше всего подходят для вас и типа проектов, которые вы предпочитаете создавать. Попробуйте построить некоторые распространенные шаблоны с помощью этих различных методов, и вы скоро найдете наиболее эффективный способ работы. Затем, в следующем руководстве, мы рассмотрим, как сетка может позиционировать элементы для нас, без необходимости использования свойств размещения!