Grid модуль в CSS був розроблений CSS Working Group для того, щоб надати найкращий спосіб створення шаблонів в CSS. Він потрапив в Candidate Recommendation в лютому 2017 року, а основні бразуерb почали його підтримку в березні 2017 року.

CSS Grid скоро стане невід'ємною частиною набору інструментів будь-якого фронт-енд розробника. З потужним функціоналом і інтуїтивно зрозумілим синтаксисом, шаблони на grid будуть безсумнівно міняти те, на чому створюється веб.

Вступ

CSS Grid це нова модель шаблону, оптимізована для двовимірних шаблонів. Це ідеальна модель для шаблонів сайтів, форм, галерей і всього, що вимагає точного і чуйного позиціонування.

З розвитком інтернету в останні роки, розробка шаблонів веб-сайтів стала все тяжчою. У ранні роки Інтернету, HTML таблиці часто використовувалися для багатоколоночних шаблонів, форм і т.д. Але у цього методу є свої недоліки. По факту, таблиці були створені для того, щоб утримувати табличні дані, а не для створення шаблонів. І не торкаючись семантичних проблем, табличні шаблони не створені для респонсив дизайну.

Флоат в кінцевому підсумку замінили табличні шаблони як загально прийнятний і рекомендований метод створення шаблонів, так як він дозволяє нам позиціонувати елементи незалежно від розмітки. Проте, поки цей метод вважався значним поліпшенням на тлі табличної верстки, у нього теж були свої обмеження. Флоат в основному були розроблені для шаблонів документів і вони не були придатними для складних шаблонів додатків, які зараз поширені в мережі. Флоат елементи складно контролювати, особливо на девайсах і viewport різних розмірів. Це призвело до різних грідоподібним хакам, які стали нормою, більшість з них була потрібна додаткова розмітка, яка відволікала від всієї концепції поділу контента. Таким чином CSS Working Group було в пошуку кращого рішення.

CSS Grid модель розглядає ці проблеми і навіть більше. Вона дозволяє вам створювати просунуті шаблони за менше часу, ніж би ви витратили на них з флотами.

У той час, flexbox працює в одному вимірі. Grid CSS же це робить в двох, таким чином краще підходячи для створення складних шаблонів.

Як це працює?

Grid шаблон працює за системою сіток. Grid це набір пересічних горизонтальних і вертикальних ліній, які створюють розміри і позиціонують систему координат для контенту в grid-контейнері.

Щоб створити Grid, вам просто потрібно виставити елементу display: grid. Це автоматично зробить всіх прямих нащадків цього елемента - grid елементами. Зараз ви можете використовувати різноманітні grid властивості для вирівнювання розміру і позиціонування належним чином. Зазвичай першим кроком є визначення того, скільки колонок і рядів є в grid. Але навіть це опціонально - як ви побачите далі.

Це приклад гріда з чотирма рядами і трьома колонками. Він складається з 12 grid елементів. Кожен з цих елементів зелений і між ними є невелика відстань.

Всі ці  grid елементи одного розміру, але вони могли б бути будь-якого розміру, якого ми захочемо. Деякі могли б охоплювати кілька стовпців і рядів, інші могли б залишатися однаковим розміром.  

Створюємо Grid

Ось приклад простого 3 × 3 гріда з невеликими пробілами між сітками.

А ось код:

<! Doctype html>
<Title> Example </ title>
<Style>
#grid { 
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2vw;
  }
#grid> div {
  font-size: 5vw;
  padding: .5em;
  background: gold;
  text-align: center;
}
</ Style>
<div id = "grid" >
  <div> 1 </ div>
  <div> 2 </ div>
  <div> 3 </ div>
  <div> 4 </ div>
  <div> 5 </ div>
  <div> 6 </ div>
  <div> 7 </ div>
  <div> 8 </ div>
  <div> 9 </ div>
</ Div>

Давайте уважніше вдивимося в код. HTML розмітка для CSS Grid виглядає ось так:

<div id = "grid" >
  <div> 1 </ div>
  <div> 2 </ div>
  <div> 3 </ div>
  <div> 4 </ div>
  <div> 5 </ div>
  <div> 6 </ div>
  <div> 7 </ div>
  <div> 8 </ div>
  <div> 9 </ div>
</ Div>

Таким чином це звичайний сніпет HTML, що складається з елементів вкладених у зовнішній елемент. Але саме для наших цілей, зовнішній  <div> це контейнер грід. Відповідно, всі елементи вкладені в нього будуть грід елементами.

Але по-факту, це не буде повноцінним грідом, поки ми не застосуємо певний CSS для нього. Ось код, який створює його:

#grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2vw;
}

Це правило застосовується до зовнішнього  <div>, так як йому було призначено ID  #grid.

Ось пояснення того, що написано в цьому CSS:

display: grid

Перетворює елемент в grid контейнер. Тепер у нас є грід-контейнер і грід-елементи. Значення грід створюють блоковий контейнер. Ви також можете використовувати display: inline-grid, що створити рядковий грід-контейнер. Або ж ви можете використовувати display: subgrid, щоб створить підсітку, це значення використовується на самих grid елементах.

grid-template-rows: 1fr 1fr 1fr

Вибудовує ряди в гріді. Кожне значення представляє розмір ряду. В цьому випадку всі значення рівні 1fr. 

Але звичайно ж для цього можна було б використовувати різні значення, такі як  100px,  7em,  30% і так далі. Ви також можете призначати імена рядків разом з їх розмірами.

grid-template-columns: 1fr 1fr 1fr

Теж саме, що і вище, тільки визначає колонки в грідах.

grid-gap: 2vw

Виставляє розрив. Тобто прогалини між грід елементами. Тут ми використовуємо vw одиницю довжини, яка відносна ширині viewport, але також ми можемо використовувати  10px,  1em і т.д.  Grid-gap властивість це скорочення для grid-row-gap і grid-column-gap властивостей.

Ну, а інша частина коду просто призначає різні стилі грід елементам.

#grid> div {
font-size: 5vw;
padding: .5em;
background: gold;
text-align: center;
}

Функція repeat ()

Ви можете використовувати функцію repeat () для повторюваних значеннь розміру елемента. Для прикладу, замість того, щоб робити це:

grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

Ми можемо зробити це:

grid-template-rows: repeat ( 5 , 1fr ) ;

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

Створюємо шаблон сайту з CSS Grid

Гріди включають в себе інтуїтивний «ASCII-графічний» синтаксис, в якому ви можете віртуально «бачити» шаблон в коді, по-цьому стає дуже легко створювати і змінювати ваш шаблон. Навіть значні зміни можуть бути зроблені за кілька секунд. Цей інтуїтивний синтаксис також допомагає з адаптивним веб-дизайном. Створення різних шаблонів для різних пристроїв стає досить дріб'язковим справою при використанні Грід.

Давайте тепер створимо шаблон сайту, який виглядає таким чином:

А ось код цього шаблону:

<! Doctype html>
<Title> Example </ title>
<Style>
body {
display: grid;
grid-template-areas:
"Header header header"
"Nav article ads"
"Footer footer footer";
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20 % 1fr 15 %;
grid-gap: 10px;
height: 100vh;
margin: 0 ;
}
header, footer, article, nav, div {
padding: 20px;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
</ Style>
<Body>
<Header id = "pageHeader"> Header </ header>
<Article id = "mainArticle"> Article </ article>
<Nav id = "mainNav"> Nav </ nav>
<Div id = "siteAds"> Ads </ div>
<Footer id = "pageFooter"> Footer </ footer>
</ Body>

Давайте ближче подивимося на наш код. HTML розмітка виглядає таким чином:

<Body>
<Header id = "pageHeader"> Header </ header>
<Article id = "mainArticle"> Article </ article>
<Nav id = "mainNav"> Nav </ nav>
<Div id = "siteAds"> Ads </ div>
<Footer id = "pageFooter"> Footer </ footer>
</ Body>

І так, ми зробимо  <body> грід-контейнером, таким чином всі інші елементи стануть грід-елементами.

А тепер давайте подивимося на ASCII-графіку, про яку ми говорили раніше.

grid-template-areas:
"Header header header"
"Nav article ads"
"Footer footer footer";

Цей шматок визначає наш шаблон. Просто дивлячись на код, ми можемо бачити, що це 3х3 грід (три ряди і три колонки). Таким чином у нас виходить п'ять грід областей на дев'яти грід осередках, так як деякі грід-області займають кілька осередків.

Ми так само бачимо, що шапка займає весь перший ряд в три осередки, а хедер займає весь нижній ряд, також забираючи три осередки. Навігаційна, тематична і рекламна секції, всі разом ділять місце в другому ряду, де кожному з цих елементів дістається по одній клітинці.

Тепер ми можемо призначити кожну з цих грід-областей кожному елементу:

#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}

Властивість  grid-area це скорочення властивості, яке дозволяє вам розміщувати грід-елементи в гріді. У нашому випадку, ми просто відсилаємось до назв, які ми попередньо вказали в grid-template-areas.

Велика частина шаблону вже завершена. Решта коду просто буде відноситись до розмірів, відстаней і висот, в загальному швидше до декоративної області.

Наступний код видає розміри рядків і колонок:

grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20 % 1fr 15 %;

Перший і третій рядки - обидва в  60px заввишки, а другий рядок забирає все, що залишилося.

Перший стовпець дорівнює  20%, а третій  15%. Другий же забирає все, що залишилося.

Змінюємо шаблон

Ви можете змінити шаблон просто перерозподіливши грід-області в  grid-template-areas. Таким чином, якщо ми змінимо на це:

grid-template-areas:
"Nav header header"
"Nav article ads"
"Nav footer ads";

То в результаті отримаємо такий шаблон:

Проте, вам може знадобитися регулювання розмірів, якщо ви рухаєте грід поменше в місце побільше.

Для прикладу, щоб зробити так:

Навігація тепер займає місце де був контент, отже, розміри були відрегульовані. В іншому випадку, у нас був би вузький контент і широка навігація. Таким чином, код зараз виглядає таким чином.

grid-template-areas:
"Header header header"
"Article nav ads" / * До цього було "nav article ads" * /
"Footer footer footer";
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 1fr 20 % 15 %; / * До цього було '20% 1fr 15% '* /

Створюємо адаптивний Grid

У шаблоні на грідах є такі значення як auto-fill і auto-fit, які дозволяють вам створювати грід з безліччю треків певного розміру, які будуть міститися в контейнер. Це може означати те, що грід є адаптивним, тобто в ньому елементи змінюють свої позиції згідно з тим, як ви міняєте розмір вікна браузера.

Приклад використання  Auto-fill:

<! Doctype html>
<Title> Example </ title>
<Style>
#grid {
display: grid;
grid-template-columns: repeat ( auto-fill, minmax ( 150px, 1fr ) ) ;
grid-gap: 2vw;
}
#grid> div {
font-size: 5vw;
padding: .5em;
background: gold;
text-align: center;
}
</ Style>
<Div id = "grid">
<div> 1 </ div>
<div> 2 </ div>
<div> 3 </ div>
<div> 4 </ div>
<div> 5 </ div>
<div> 6 </ div>
<div> 7 </ div>
<div> 8 </ div>
<div> 9 </ div>
</ Div>

Ось результат:

Змініть розмір браузера, щоб побачити, що відбувається. Якщо ви дивитеся з мобільного пристрою, то спробуйте подивитися з робочого столу. 

Код, що відповідає за це:

grid-template-columns: repeat ( auto-fill, minmax ( 150px, 1fr ) ) ;

У ньому колонкам видається мінімальний розмір в  150px і максимум по місцю, що залишилось Такі треки будуть повторюватися стільки разів, скільки потрібно для того, щоб укластися в контейнер.

Розмір цих треків вказано в другому параметрі. У нашому випадку, ми використовуємо  minmax(150px, 1fr), щоб вказати те, що мінімальний розмір стовпчика дорівнює  150px, а максимальний  1fr.

Auto-fit

auto-fit працює практично так само, як і  auto-fill. Різниця тут лише в тому, що auto-fit стягує всі порожні треки в кінці розміщення, в той час як  auto-fill ні. Кращий спосіб тут, це демонстрація з порівнянням.

<! Doctype html>
<Title> Example </ title>
<Style>
.grid {
display: grid;
grid-gap: 2vw;
border: 1px solid black;
margin: 10px;
}
.grid> div {
font-size: 5vw;
padding: .5em;
background: gold;
text-align: center;
}
.auto-fill {
grid-template-columns: repeat ( auto-fill, minmax ( 150px, 1fr ) ) ;
}
.auto-fit {
grid-template-columns: repeat ( auto-fit, minmax ( 150px, 1fr ) ) ;
}
</ Style>
<Div class = "grid auto-fill">
<div> 1 </ div>
<div> 2 </ div>
</ Div>
<Div class = "grid auto-fit">
<div> 1 </ div>
<div> 2 </ div>
</ Div>

Ось результат

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

Гріди з медіа запитами

Однією з сильних сторін грідів є те, що ви можете створити відмінний шаблон за секунди. Це робить гріди ідеальними для медіа запитів. Ми можемо просто перепризначити значення в ASCII-графіку і обернути результат в медіа запит.

<! Doctype html>
<Title> Example </ title>
<Style>
body {
display: grid;
grid-template-areas:
"Header header header"
"Nav article ads"
"Footer footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20 % 1fr 15 %;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0 ;
}
/ * Stack the layout on small devices / viewports. * /
@media all and ( max-width: 575px ) {  
body {
grid-template-areas:
"Header"
"Article"
"Ads"
"Nav"
"Footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
header, footer, article, nav, div {
padding: 1 .2em;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
</ Style>
<Body>
<Header id = "pageHeader"> Header </ header>
<Article id = "mainArticle"> Article </ article>
<Nav id = "mainNav"> Nav </ nav>
<Div id = "siteAds"> Ads </ div>
<Footer id = "pageFooter"> Footer </ footer>
</ Body>

ось результат

Це трьохстовпчиковий шаблон на великому  viewport і він стискається в один стовпчик на маленьких пристроях. Таким чином, цей приклад буде виглядати по-іншому в залежності від розміру екрана. У будь-якому випадку, ось релевантний код для трьохколоночного шаблону, для широких вьюпоротів.

grid-template-areas:
"Header header header"
"Nav article ads"
"Footer footer footer";

А ось відповідний код для мобільної версії:

grid-template-areas:
"Header"
"Article"
"Ads"
"Nav"
"Footer";

Таким чином, вся справа полягає в перепризначенні значень у властивості  grid-template-areas. У нашому випадку ми обернули мобільну версію в медіа запит, як тут:

@media all and ( max-width: 575px ) {  
body {
grid-template-areas:
"Header"
"Article"
"Ads"
"Nav"
"Footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}

Зверніть увагу, що ми також підкоригували значення в grid-template-rows і в grid-template-columns, щоб вони підходили під новий шаблон. Зокрема, тут повинна бути тільки одна колонка і вона повинна займати весь вільний простір. А так як всі грід елементи будуть в одному місці, ми призначимо 5 рядків і визначимо їх висоти.

Поєднуємо  grid з block

Залежно від вимог до вашого шаблону, можна змінити мобільну версію на  display: block. Як тут:

@media all and ( max-width: 575px ) {  
body {
display: block;
}
}

Це буде працювати також як і в прикладі вище, але по-дефолту, елементи встануть за своїм вихідним порядком. В наведеному вище прикладі, мобільна версія має nav під ads, але якби ми використовували  display: block, то nav був би вище ads.

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

Явні і неявні гріди

CSS Grid використовує концепцію явного гріда і неявного. Це ключова концепція, якої вам потрібно остерігатися при створенні грідів, в іншому випадку під кінець ви побачите скупчення рядків і колонок, про існування яких ви навіть і не хнали.

Явний грід, це грід, який ви визначаєте в grid-template-rows, grid-template-colums і в grid-template-areas.

Тим не менш, ви все ще можете мати елементи, які не поміщаються в ваш «явно» визначений грід. Для прикладу, ви визначили грід, який може вмістити тільки шість елементів, але сам контейнер насправді складається з дев'яти елементів. Тільки шість елементів будуть уміщатися в явний грід і три залишаться. І ось де починаються неявні гріди.

Неявні гріди автоматично генеруються грід-контейнером, всякий раз коли грід-елементи розташовуються за межами явного гріда. Контейнер генерує неявні грід треки, додаючи неявні рядки в грід. Ці рядки разом з явними і формують неявні. Ось приклад :

<! Doctype html>
<Title> Example </ title>
<Style>
#grid {
display: grid;
grid-template-rows: 60px 60px;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
#grid> div {
padding: .5em;
background: gold;
text-align: center;
}
</ Style>
<Div id = "grid">
<div> 1 </ div>
<div> 2 </ div>
<div> 3 </ div>
<div> 4 </ div>
<div> 5 </ div>
<div> 6 </ div>
</ Div>


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

І це добре. Якби не був створений неявний грід, то два додаткові елементи створили б повний безлад в сітці.

Виставляємо розмір треку для неявних грідів

Можливо ви помітили, що додатковий ряд не такий заввишки, як попередні два. Це тому що ми виставили висоту рядка в grid-template-rows властивості, але застосовується вона тільки для явних грідів. Висота рядка на неявних грідах повинна виставлятися за допомогою властивості grid-auto-rows. Але так як ми цього не зробили, виходить, що неявний ряд використовує розмір треку auto, який ґрунтується на контенті. Ось так розташовуються властивості виставлення розміру треку:

Загалом виходить так:

• Явний грід використовує  grid-template-rows і grid-template-columns
• Неявний грід використовує  grid-auto-rows і grid-auto-columns

У наступному прикладі  ми зробимо явні і неявні рядки однієї висоти ( 60px).

<! Doctype html>
<Title> Example </ title>
<Style>
#grid {
display: grid;
grid-template-rows: 60px 60px;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
grid-auto-rows: 60px;
}
#grid> div {
padding: .5em;
background: gold;
text-align: center;
}
</ Style>
<Div id = "grid">
<div> 1 </ div>
<div> 2 </ div>
<div> 3 </ div>
<div> 4 </ div>
<div> 5 </ div>
<div> 6 </ div>
</ Div>

Auto-flow - рядки або колонки

Поки що ми створювали лише додаткові рядки, щоб укласти додаткові грід-елементи. Але що, якщо ми хочемо використовуватися додаткові колонки?

Для цього у нас є властивість grid-auto-flow

Це властивість дозволяє вказувати, що потрібно використовувати для авто-розміщення елементів, рядки або колонки. Іншими словами, ви можете вказати як буде рости неявний грід - у вигляді рядків або колонок. Початкове значення тут - row, що пояснює те, чому на прикладі вище були додані додаткові рядки, замість колонок. Але якщо ви віддаєте перевагу використовувати колонки, то ви можете використовувати це:

grid-auto-flow: column;

Ось що трапиться , якщо ми застосуємо це до першого прикладу.

<! Doctype html>
<Title> Example </ title>
<Style>
#grid {
display: grid;
grid-template-rows: 80px 80px;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
grid-auto-flow: column;
}
#grid> div {
padding: .5em;
background: gold;
text-align: center;
}
</ Style>
<Div id = "grid">
<div> 1 </ div>
<div> 2 </ div>
<div> 3 </ div>
<div> 4 </ div>
<div> 5 </ div>
<div> 6 </ div>
</ Div>

Само собою, ви можете спробувати піти далі в цьому прикладі і використовувати grid-auto-columns властивість, щоб змінити ширину автоматично згенерованої колонки. Так що якщо ви хочете, щоб всі колонки вище, були однакової ширини, вам треба використовувати  grid-auto-columns: 1fr.

Майте на увазі, що виставляючи column для grid-auto-flow ви змінюєте потік грід елементів. Ви вже могли помітити, що грід елементи в прикладі вище розміщуються уздовж кожної колонки, замість кожного рядка.

Значення dense

У  grid-auto-flow також є опциональне значення dense, яке може допомогти в створенні компактного гріда і застерегти від великих прогалин між грід-елементами в разі непослідовних розмірів всіх грід-елементів в контейнері. Наприклад, у вас є ось такий грід:

Застосування  dense перетворить його в такий:

Застосування цього значення призведе до того, що елементи будуть показуватися не по порядку, так як наступні елементи можуть повернутися назад і заповнити прогалини, які з'являлися раніше, але це не для кожної ситуації.

Розстановка Grid-елементів

Просто напросто, все сходиться до грід-ліній.

Грід-лінії це горизонтальні і вертикальні лінії в гріді. Кожен рядок і колонка має грід лінію з кожної своєї сторони. У кожної грід лінії є числовий індекс, до якого ви можете посилатися під час розстановки грід елементів.

На прикладі вище, перший грід елемент починається з малої лінії 1 і колонкової лінії 1, а закінчується на рядковій лінії  2  і колонковій лінії  2. Другий грід елемент починається на рядковій лінії  3  і колонковій лінії  2, а закінчується на рядковій лінії  4  і колонковій лінії  4 .

Це можна зробити за допомогою наступного коду.

# Item1 {
grid-row-start: 1 ;
grid-column-start: 1 ;
grid-row-end: 2 ;
grid-column-end: 2 ;
}
# Item2 {
grid-row-start: 3 ;
grid-column-start: 2 ;
grid-row-end: 4 ;
grid-column-end: 4 ;
}

А ось робочий приклад :

<! Doctype html>
<Title> Example </ title>
<Style>
#grid {
display: grid;
grid-template-rows: 50px 1fr 80px;
grid-template-columns: 120px 1fr 80px;
grid-gap: 5px;
height: 90vh;
}
#grid> div {
background-color: # 66CC00;
}
# Item1 {
grid-row-start: 1 ;
grid-column-start: 1 ;
grid-row-end: 2 ;
grid-column-end: 2 ;
}
# Item2 {
grid-row-start: 3 ;
grid-column-start: 2 ;
grid-row-end: 4 ;
grid-column-end: 4 ;
}
</ Style>
<Div id = "grid">
<Div id = "item1"> </ div>
<Div id = "item2"> </ div>
</ Div>

У цьому випадку нам не обов'язково вказувати кінцеві значення на першому елементі, тому що він охоплює тільки один трек. Теж саме можна сказати і про другий грід елемент. По дефолту, якщо ви не вказуєте кінцеву лінію, то елемент охопить тільки один трек.

Насправді, нам не потрібно було вказувати будь-позиціонування для першого грід елемента, так як він знаходиться на певній позиції, то він був би в будь-якому випадку. Але якби ми не вказали позиціонування для другого елементу, то він би перебував відразу за першим елементом займаючи лише 1 трек.

Неймінг грід ліній

Ви також можете проіменовувати грід лінії для полегшення звернення до них. Це можна робити виставляючи властивості grid-template-rows і  grid-template-columns, наприклад як тут:

#grid {
display: grid;
/ * Set the tracks and name the lines * /
grid-template-rows: [ row1-start ] 50px [ row2-start ] 1fr [ row3-start ] 80px [ row3-end ] ;
grid-template-columns: [ col1-start ] 120px [ col2-start ] 1fr [ col3-start ] 80px [ col3-end ] ;
grid-gap: 5px;
height: 90vh;
}
...
/ * Now refer to those named lines * /
# Item2 {
grid-row-start: row3-start;
grid-column-start: col2-start;
grid-row-end: row3-end;
grid-column-end: col3-end;
}

Проіменовані лінії можуть бути як явними, так і неявними. Неявні проіменовані лінії створюються щоразу, коли ви створюєте іменні грід-області використовуючи  grid-template-areas.

Ім'я береться з грід-області з додатком в кінці -start і -end, в залежності від того початок це або кінець лінії.

Таким чином для кожної проіменованої грід області header, буде створено чотири неявних лінії. Дві названі header-start і column-start в проіменованій грід області та дві названі header-end відповідно.

Проіменовані грід області

Грід області можуть бути проіменовані у властивості  grid-template-areas самого грід контейнера. Це те, що ми робили до цього, коли створювали шаблон сайту. Щоб відновити це в пам'яті, то це виглядає так:

#grid {
display: grid;
/ * Проіменовуємо грід області * /
grid-template-areas:
"Aa"
"Bc";
...
}
...
/ * Тепер застосовуємо кожен грід елемент до проіменованої грід області * /
#a {
grid-area: a;
}
#b {
grid-area: b;
}
#c {
grid-area: c;
}

Ви можете вказати вільну позицію, використовуючи точку (.) Або серію точок без пробілів. Для прикладу:

grid-template-areas:
"Aa"
". b ";
або
grid-template-areas:
"Header header"
"... content";

Властивості розміщення грідів

Є три коротких властивості, які можна використовувати замість довгих властивостей для розміщення грідів, згаданих в прикладах вище. Ось куди вони всі поміщаються.

• grid-area 
• grid-column - це властивість є скороченням для:

grid-column-start - показує яка колонкова лінія грід-елемента стартова і на скільки треків тягнеться.

grid-column-end - вказує те, на яких колонкових лініях закінчується грід-елемент і на скільки треків тягнеться.

• grid-row - це властивість є скороченням для:

grid-row-start - вказує з якої рядкової лінії починається грід-елемент і на скільки треків він тягнеться.

grid-row-end - показує яка рядкова лінія буде останньою для елемента і наскільки треків вона буде тягнутися.

Ви також можете використовувати  grid-auto-flow властивість, яка згадувалася в главі перед цією. Вона вказує як автоматично розміщені grid елементи повинні міститися в гріді. 

В настпній частинні статті ми розглянемо вкладені гріди, їх вирівнювання і позиціювання.

Джерело