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

Для каждой строки должен быть задан перечень имен областей, к которым относятся ячейки строки

Имена областей для ячеек одной строки разделяются пробелом и заключается в кавычки ( "top top right" )

Число имен должно сооответствовать числу ячеек в строке, заданному атрибутом grid-template-columns

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

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

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

Для размещения элемента в сетке необходимо указать имя области с помощью 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: #444444;
  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;
}

---

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

header, nav, main, footer {
  padding: 0.5rem 1rem;
}

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

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

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

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

h1, h2, h3 {
    margin: 2vh 3vh;
}


@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;
  }
}

@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;
  }
}

@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>