Учебник по CSS Grid

CSS Grid — это современная система компоновки, которую мы можем использовать при компоновке страниц.

Ее часто сравнивают с Flexbox. И хотя они обе являются отличными системами для работы со сложными макетами, есть одно существенное различие: CSS Grid работает с двумя измерениями (строки и столбцы), а Flexbox работает только с одним измерением (строки или столбцы).

Если вам нужно определить макет только как строку или столбец, то Flexbox, скорее всего, подойдет для ваших нужд. Если вы работаете в обоих измерениях — пришло время для CSS Grid!

Основы CSS Grid

Мы активируем макет сетки, сделав HTML-элемент контейнером сетки.

Наш HTML:

<div class="grid-container">
  <!-- content -->
</div>

В нашем CSS мы просто устанавливаем свойство display на grid:

.grid-container {
  display: grid;
}

Сетчатый макет состоит из родительского элемента и одного или нескольких дочерних элементов.

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

В этом руководстве мы будем работать со следующим кодом:
HTML:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

И наши стили CSS:

* {
  font-family: monospace;
  text-align: center;
  font-size: 44px;
}
.grid-container {
  display: grid;
  padding: 30px;
  background-color: seagreen;
  border: 2px solid #000;
}
.grid-container > div {
  background-color: lightblue;
  border: 2px solid #000;
}

Определение столбцов и строк

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

Например, укажем нашей сетке размещать элементы (дочерние элементы) в 4 столбцах шириной 200px и 2 строках высотой 150px каждая.

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 150px 150px;
}

А теперь давайте сделаем сетку меньшего размера — 3×3:

Автоматические размеры

Часто приходится работать с элементами, не имеющими фиксированного размера. Например, у вас может быть фиксированная панель навигации, затем гибкая секция контента, затем фиксированная секция нижнего колонтитула. Для этого мы можем использовать auto, и макет будет адаптироваться к размерам нашего содержимого:

.grid-container {
  display: grid;
  grid-template-rows: 50px auto 150px;
}

Добавление пространства между элементами сетки

Мы можем добавить расстояние между элементами сетки, используя grid-column-gap и/или grid-row-gap:

Мы также можем использовать сокращение grid-gap, чтобы задать оба параметра сразу:

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 100px 50px;
  grid-gap: 25px;
}

Позиционирование элементов сетки

Мы можем контролировать, сколько места занимает каждый элемент сетки в столбце или строке с помощью следующих свойств:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Рассмотрим пример:

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 150px 150px;
}
.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
.grid-item6 {
  grid-column-start: 3;
  grid-column-end: 5;
}

Здесь мы добавили классы для первого и шестого элементов нашей сетки.

Номера соответствуют вертикальной линии, разделяющей каждый столбец. Поэтому, установив grid-column-start в 1 и grid-column-end в 3, мы указываем нашему элементу начинать с первой строки и заканчивать третьей.

Аналогично мы указываем нашему шестому элементу начинаться с 3-й строки и заканчиваться на 5-й.

Разумеется, это также относится к grid-row-start и grid-row-end, при этом ячейки расширяются по строкам, а не по столбцам.

Сокращение позиции элемента

Мы можем повторить описанные выше действия, используя сокращенные свойства grid-column & grid-row, следующим образом:

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 150px 150px;
}
.grid-item1 {
  grid-column: 1 / 3;
}
.grid-item6 {
  grid-column: 3 / 5;
}

Можно пойти еще дальше и использовать grid-area как сокращение для grid-column и grid-row. Это применимо только в тех случаях, когда нужно, чтобы элемент охватывал обе строки и столбцы:

.grid-item1 {
  grid-row: 1 / 4;
  grid-column: 3 / 5;
}

Будет выглядеть следующим образом:

.grid-item1 {
  grid-area: 1 / 3 / 4 / 5;
}

В таком порядке: grid-row-start > grid-column-start > grid-row-end > grid-column-end.

Использование ‘span’ для позиционирования элементов

Еще один вариант позиционирования элементов — span:

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 150px 150px;
}
.grid-item1 {
  grid-column: 1 / span 2;
}
.grid-item6 {
  grid-column: 3 / span 2;
}

С помощью grid-column: 1 / span 2, начиная со строки 1 и охватывая 2 колонки.

Использование дробных единиц

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

Дробные единицы дают нам возможность создавать макеты без необходимости указывать фиксированные размеры.

Например, можно разделить сетку на 3 колонки одинаковой ширины, каждая из которых занимает 1⁄3 доступного пространства:

.grid-container {
  grid-template-columns: 1fr 1fr 1fr;
}

Слишком просто!

Использование других единиц измерения CSS

Мы можем использовать любые единицы длины CSS. Поэтому смело используйте смесь процентов, пикселей, rem, em и фракций:

.grid-container {
  grid-template-columns: 2rem 25% 2fr 1fr
}

Использование функции repeat()

Мы можем использовать repeat(), чтобы указать количество повторений строки или столбца, а также длину каждого из них.

Это удобный способ быстрого создания макета & он также сокращает количество строк кода! Например, вы можете задать 3 колонки одинаковой ширины следующим образом:

.grid-container {
  grid-template-columns: repeat(3, 1fr);
}

Использование minmax()

Мы используем minmax() для задания минимальной или максимальной ширины дорожки сетки.

Допустим, вы хотите, чтобы столбец был от 100px до 300px, а затем следовал столбец 1fr:

.grid-container {
  grid-template-columns: minmax(100px, 300px) 1fr;
}

Значение min должно быть меньше значения max. И единицы fr не могут быть использованы для минимального значения, но они могут быть использованы для максимального!

Используя 1fr в качестве максимального значения, вы обеспечите расширение дорожки и заполнение доступного пространства:

.grid-container {   
  grid-template-columns: minmax(250px, 1fr) 1fr;   
}

Используя этот способ, minmax() позволяет нам создавать дорожки сетки, которые адаптируются к доступному пространству, но не сужаются меньше заданного размера.

Теперь при изменении размера браузера 1-я колонка не уменьшится менее чем до 250px.

Вы также можете использовать ключевые слова auto, min-content и max-content в качестве значений min или max.

Использование justify-content

Мы используем justify-content для выравнивания всей сетки внутри контейнера.

Есть несколько значений, с которыми мы можем работать:

• space-evenly
• space-around
• space-between
• center
• start
• end

Помните, что ширина сетки должна быть меньше ширины контейнера, чтобы justify-content сработал!

Давайте посмотрим пример каждого из них:

.grid-container {
   display: grid;
   justify-content: space-evenly;
}

.grid-container {
   display: grid;
   justify-content: space-around;
}

.grid-container {
   display: grid;
   justify-content: space-between;
}

.grid-container {
   display: grid;
   justify-content: center;
}

.grid-container {
   display: grid;
   justify-content: start;
}

.grid-container {
   display: grid;
   justify-content: end;
}

Использование свойства align-content

Мы используем свойство align-content для вертикального выравнивания всей сетки внутри контейнера.

Чтобы это свойство работало, высота сетки должна быть меньше высоты контейнера.

.grid-container {
   display: grid;
   align-content: space-evenly;
}

.grid-container {
   display: grid;
   align-content: space-around;
}

.grid-container {
   display: grid;
   align-content: space-between;
}

.grid-container {
   display: grid;
   align-content: center;
}

.grid-container {
   display: grid;
   align-content: start;
}

.grid-container {
   display: grid;
   align-content: end;
}

Использование шаблонов-областей сетки

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

Давайте используем grid-template-areas для создания типичного макета с верхним колонтитулом, боковой панелью слева от основного содержимого и нижним колонтитулом:

И используемый код:

HTML:

<div class="grid-container">
  <main>
    Main
  </main>
  <aside>
    Sidebar
  </aside>
  <footer>
    Footer
  </footer>
  <header>
    Header
  </header>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-template-rows: 125px 225px;
  grid-template-areas:
    "header header header header"
    "sidebar main main main"
    "footer footer footer footer";
}
main {
  grid-area: main;
}
aside {
  grid-area: sidebar;
}
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}

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

Обеспечение отзывчивости

Если мы хотим, чтобы боковая панель сместилась ниже основного содержимого на мобильных устройствах, мы можем легко сделать это с помощью медиа-запроса:
@media (max-width: 500px) {

 .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

Заключение

Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь

🌎 Давайте общаться

• Портфолио

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen