grid template areas

Grid layout

---

Именованные области сетки

^{grid-template-areas
grid-area}

Именованные области сетки создаются с помощью атрибута grid-template-areas

Каждой ячейке сетки ставится в соответствие имя области, которой эта ячейка будет принадлежать

grid-template-areas

.grid-container {
    display: grid;
    grid-template-columns: 2fr 3fr 1fr;
    grid-template-rows: 1fr 4fr 1fr;
    grid-template-areas: "top top right"
                        "left middle right"
                        "left bottom bottom"
}

В таблице 3 столбца и 3 строки

т.е. в каждой строке будет 3 ячейки

• запись "top top right" - это перечисление имен областей, к которым относятся ячейки первой строки:

  • первая и вторая ячейки - к области top
  • третья ячейка - к области right

• запись "left middle right" - это перечисление имен областей, к которым относятся ячейки второй строки:

  • первая ячейка - к области left
  • вторая ячейка - к области middle
  • третья ячейка - к области right

• запись "left bottom bottom" - это перечисление имен областей, к которым относятся ячейки второй строки:

  • первая ячейка - к области left
  • вторая и третья ячейки - к области bottom

	2fr	3fr	1fr
1fr	top	top	right
8fr	left	middle	right
1fr	left	bottom	bottom

^{Область может иметь только прямоугольную форму}

---

Итак, у нас есть пять именованных областей сетки: left, right, top, bottom и middle

Теперь займемся "поселением жильцов"

Для размещения элемента в сетке необходимо указать имя области с помощью CSS-атрибута grid-area

^{Если вы разместите два элемента в одной и той же области сетки, они наложатся друг на друга}

grid-area

.grid-top-element {
    grid-area: top;
}

После этого элемент с классом grid-top-element займет все ячейки сетки, привязанные к этой области

.grid-right-element {
    grid-area: right;
}

.grid-left-element {
    grid-area: left;
}

.grid-bottom-element {
    grid-area: bottom;
}

---

1

Создадим сетку с именованными областями в контейнере body, используя атрибут grid-template-areas:

grid-template-areas

body {
  margin: 0;
  font-family: Arial;
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: 25vw 1fr;
  grid-template-rows: 10vh 1fr 10vh ;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
}

Сетка состоит из 2-х колонок и 3-х строк

С помощью атрибута grid-template-areas мы создали именованные области сетки

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

Строка	Колонка
	1	2
1	head	head
2	nav	main
3	nav	foot

^{Обе ячейки 1-ой строки будет занимать элемент, у которого атрибут grid-area будет иметь значение head}

^{Пусть это будет элемент header}

header

header {
  grid-area: head;
  background-color: #057;
  color: #dde;
}

^{Первые ячейки 2-ой и 3-ей строки будет занимать элемент, у которого атрибут grid-area будет иметь значение nav}

^{Пусть это будет элемент nav}

nav

nav {
  grid-area: nav;
  background-color: #444;
  color: white;
}

^{Вторую ячейку 2-ой строки будет занимать элемент, у которого атрибут grid-area будет иметь значение main}

^{Пусть это будет элемент main}

main

main {
  grid-area: main;
  background-color: #dde;
}

^{Вторую ячейку 3-ей строки будет занимать элемент, у которого атрибут grid-area будет иметь значение foot}

^{Пусть это будет элемент footer}

footer

footer {
  grid-area: foot;
  background-color: #057;
  color: #dde;
}

Теперь определим медиа-правила для различных девайсов

Для девайсов с шириной viewport до 600px определим вертикальный макет:

@media screen and (max-width: 600px) {
  body {
    grid-template-areas: "head"
                         "nav"
                         "main"
                         "foot";
    grid-template-rows: 10vh 8vh 1fr 10vh ;
    grid-template-columns: 100vw;
  }
}

^{Как видите, в сетке всего 1 колонка, а строк уже 4}

Для девайсов с высотой viewport не более 480px определим горизонтальный макет ( независимо от ширины )

@media screen and (max-height: 480px) {
  body {
    grid-template-areas: "head head"
                         "nav main"
                         "nav foot";
    grid-template-rows: 15vh 70vh 15vh ;
    grid-template-columns: 25vw 75vw;
  }
}

Для девайсов, у которых высота не превышает 480px или ширина не превышает 600px, уменьшим внешние отступы и размеры шрифта заголовков:

@media screen and (max-height: 480px), (max-width: 600px) {
  h1, h2, h3 { margin: 1vh 2vw; }
  h1 {
      font-size: 1.4rem;
  }
  h2 {
      font-size: 1.2rem;
  }
  h3 {
      font-size: 1rem;
  }
}

Мы получили вот такую сетку:

---

Осталось только вставить элементы на страницу:

<body>
  <header>
    <h2>Header</h2>
  </header>
  <nav>
    <h3>Navigation</h3>
  </nav>
  <main>
    <h3>Main</h3>
  </main>
  <footer>
    <h3>Footer</h3>
  </footer>
</body>