Карта сайта

Урок 20: Grid Layout в HTML и CSS

/Уроки по HTML/CSS/Урок 20: Grid Layout в HTML и CSS
Урок 20: Grid Layout в HTML и CSS
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

Наступил двадцатый урок нашего курса по изучению HTML и CSS для начинающих. Сегодня мы погрузимся в увлекательный мир Grid Layout, мощного инструмента для создания сложных и адаптивных макетов веб-страниц. Если вы до этого работали с Flexbox, то Grid станет для вас следующим шагом в освоении современных технологий вёрстки.

Что такое Grid Layout?

CSS Grid Layout (или просто Grid) это система для создания двумерных макетов. В отличие от Flexbox, который работает в одном измерении (либо строка, либо столбец), Grid позволяет управлять как строками, так и столбцами одновременно. Это делает Grid идеальным инструментом для создания сложных сеток, таких как галереи, таблицы, карточки товаров и многое другое.

Grid Layout предоставляет нам полный контроль над размещением элементов на странице, их выравниванием и распределением пространства. Давайте разберёмся, как это работает.

Создание сетки

1. Основы Grid

Для начала создадим простую сетку. Для этого нам нужно:

  1. Создать контейнер и задать ему свойство display: grid.
  2. Определить количество строк и столбцов.

Пример HTML:

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

Теперь добавим CSS:

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* Три столбца по 100px */
  grid-template-rows: 100px 100px; /* Две строки по 100px */
  gap: 10px; /* Расстояние между элементами */
}

В этом примере мы создали сетку с тремя столбцами и двумя строками. Каждый элемент внутри контейнера автоматически занимает одну ячейку сетки.

2. Оси и треки

В Grid Layout есть две основные оси:

  • Основная ось (row axis) — горизонтальная ось, вдоль которой располагаются строки.
  • Поперечная ось (column axis) — вертикальная ось, вдоль которой располагаются столбцы.

Треки — это строки и столбцы сетки. Мы можем управлять их размерами с помощью свойств grid-template-rows и grid-template-columns.

Пример:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Три столбца: первый и третий занимают 1 часть, второй — 2 части */
  grid-template-rows: auto 100px; /* Первая строка автоматически подстраивается под контент, вторая — 100px */
}

Здесь мы использовали единицу измерения fr (fraction), которая позволяет распределять доступное пространство пропорционально.

3. Размещение элементов

Grid позволяет точно контролировать, где и как будут располагаться элементы внутри сетки. Для этого используются следующие свойства:

  • grid-column-start и grid-column-end — определяют начальную и конечную позицию элемента по столбцам.
  • grid-row-start и grid-row-end — определяют начальную и конечную позицию элемента по строкам.
  • grid-area — сокращённая запись для указания позиции элемента.

Пример:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3; /* Элемент занимает два столбца */
  grid-row-start: 1;
  grid-row-end: 2; /* Элемент занимает одну строку */
}

.item2 {
  grid-area: 2 / 1 / 3 / 4; /* Сокращённая запись: строка-начало / столбец-начало / строка-конец / столбец-конец */
}

Практические задачи

Задача 1: Создать сетку для галереи изображений

Создайте сетку из 6 изображений, где первые два изображения занимают два столбца, а остальные — по одному.

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
  <img src="image6.jpg" alt="Image 6">
</div>
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gallery img:first-child,
.gallery img:nth-child(2) {
  grid-column: span 2;
}

Задача 2: Адаптивная сетка

Создайте адаптивную сетку, которая на больших экранах отображает 4 столбца, а на мобильных устройствах — 2 столбца.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

Grid Layout это мощный инструмент, который значительно упрощает создание сложных макетов. Сегодня мы изучили основы создания сеток, управления осями и треками, а также размещения элементов. Попрактикуйтесь с примерами, чтобы лучше понять, как работает Grid.

Если вы хотите углубить свои знания, рекомендую ознакомиться с полным курсом по HTML и CSS для начинающих. Там вы найдёте ещё больше уроков, практических задач и полезных советов.

До встречи в следующем уроке.