Гриды «на пальцах»

Вкратце напомню о гридах. Гриды — это набор свойств для раскладки элементов на странице или в отдельном элементе. Чтобы включить гриды, нужно задать элементу display: grid и сетку: количество строк и столбцов, размеры и расстояния между ними. Элемент станет грид‑контейнером, а все вложенные в него элементы станут грид‑элементами и встанут по направляющим:

Гриды «на пальцах»

<div class="columns">
  <div>Первая колонка</div>
  <div>Вторая колонка</div>
  <div>Первая колонка</div>
  <div>Вторая колонка</div> 
</div>
<style>
  .columns {
    /* Включаем гриды */
    display: grid;
    /* Задаём две колонки, два ряда
       и отступ между ними */
    grid-template-columns: 100px 150px;
    grid-template-rows: 100px 150px;
    gap: 18px;
  }
</style>
Первая колонка
Вторая колонка
Первая колонка
Вторая колонка

По умолчанию элементы в грид‑контейнере последовательно заполняют его ячейкой за ячейкой, двигаясь слева‑направо и сверху‑вниз. Чтобы растянуть элемент на несколько ячеек, используют grid-column и grid-row. С помощью них мы указываем начальную и конечную направляющие, соответственно, всё пространство между ними отдаётся элементу:

.grid {
  display: grid;
  /* Три колонки, равномерно делящие пространство */
  grid-template-columns: repeat(3, 1fr);
  /* Пять строк с минимальной высотой в 100 пк */
  grid-template-rows: repeat(5, minmax(100px, auto));
  gap: 18px;
}
.one {
  /* Займи колонки от первой до третьей направляющей */
  grid-column: 1 / 3;
  /* Встань в первый ряд */
  grid-row: 1;
}
.two {
  /* Займи две колонки, начиная со второй направляющей */
  grid-column: 2 / span 2;
  /* Займе два ряда, начиная со второй направляющей */
  grid-row: 1 / span 2;
}
.three {
  /* Встань в первую колонку */
  grid-column: 1;
  /* Займи строки от второй до пятой направляющей */
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3 / span 2;
}
.five {
  grid-column: 2;
  grid-row: 4 / span 2;
}
.six {
  grid-column: 1;
  grid-row: 5;
}
1
2
3
4
5
6

Чтобы не путаться в цифрах, можно задать именованные области и использовать их:

Без имён
article {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 50px 1fr 5px;
  gap: 18px;
}
article header {
  grid-column: 1 / span 3;
  grid-row: 1;
}
article main {
  grid-column: 1 / span 2;
  grid-row: 2;
}
article aside {
  grid-column: 3;
  grid-row: 2;
}
article footer {
  grid-column: 1 / span 3;
  grid-row: 3;
}
С именами
article {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 50px minmax(100px, 1fr) 50px;
  grid-template-areas: 
    "header header header"
    "main main aside"
    "footer footer footer";
  gap: 18px;
}
article header {
  grid-area: header;
}
article main {
  grid-area: main;
}
article aside {
  grid-area: aside;
}
article footer {
  grid-area: footer;
}
Результат
header
main
footer
Чтобы мастерски освоить раскладку элементов в гридах, поиграйте в Grid Garden

Что запомнить

По умолчанию грид‑элементы последовательно заполняют контейнер ячейку за ячейкой.

Чтобы растянуть элемент на несколько колонок, используем grid-column, на несколько строк — grid-row

Чтобы не мучаться с номерами направляющих, можно использовать именованные области: задать их с помощью grid-template-areas, использовать — с помощью grid-area

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы