Главная / Программирование / Игра Grid
Уроки + 20 уровней

Расставляйте блоки с помощью Grid

Пишете в контейнере display: grid и grid-template-columns и расставляете блоки по ячейкам. Написанное сразу отображается вживую.

Начать
Вживую20 уровнейС анимацией
ЖИВОЕ ДЕМО

Задача: Создайте 3 равные колонки

123456
grid-template-columns: 1fr;
Верно! Сетка готова.

Посмотрите каждое свойство Grid вживую на примере блоков: как строится сетка ячеек и что меняется. Затем переходите к «Практике».

1
2
3
4
display: grid
display: grid

Сетка ячеек начинается отсюда

Если задать контейнеру display: grid, он превращается в сетку ячеек, а блоки (grid-элементы) размещаются по строкам и колонкам. Flexbox одноосный, а Grid — двумерный (строки + колонки).

.maydon {
  display: grid;
}
1
2
3
4
5
6
grid-template-columns

Задание колонок

grid-template-columns задаёт, сколько будет колонок и какой они ширины. 1fr = одна доля свободного места. repeat(3, 1fr) = три равные колонки. Можно и смешивать: 100px 1fr.

grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
1
2
3
4
5
6
grid-template-rows

Задание строк

grid-template-rows задаёт высоту строк. Если не задать, строки создаются автоматически (по содержимому). 1fr 1fr делает две строки равными по всей высоте.

grid-template-rows: 1fr 1fr;
grid-template-rows: 80px 120px;
1
2
3
4
5
6
gap

Промежуток между ячейками

gap добавляет равный промежуток между ячейками. Если хотите управлять по отдельности: column-gap (между колонками) и row-gap (между строками).

gap: 16px;
column-gap: 24px; row-gap: 8px;
1
2
3
4
5
6
justify-items

Горизонтальное выравнивание внутри ячейки

justify-items размещает каждый блок внутри своей ячейки по горизонтали (лево-право): start, center, end. Значение по умолчанию — stretch.

justify-items: center;
justify-items: end;
1
2
3
4
5
6
align-items

Вертикальное выравнивание внутри ячейки

align-items размещает блоки внутри ячейки по вертикали (верх-низ): start, center, end. Оба сразу: place-items: center = центр и по горизонтали, и по вертикали.

align-items: center;
place-items: center;
1
2
3
justify-content

Выравнивание всей сетки целиком

Если ячейки меньше контейнера, justify-content размещает всю сетку по горизонтали, а align-content — по вертикали. Это отличается от justify-items: сдвигается не отдельный блок, а весь набор целиком.

justify-content: center;
align-content: space-between;
1
2
3
4
5
grid-column · span

Занять несколько ячеек

grid-column — свойство блока: задаёт, сколько колонок он займёт. span 2 = шириной в две колонки. Для строк — grid-row: span 2. Можно и по номерам линий: grid-column: 1 / 3.

.quti1 {
  grid-column: span 2;
}
1,1
1,2
1,3
2,1
2,2
2,3
размещение по линиям

Точно в нужную ячейку

Линии Grid нумеруются начиная с 1. Чтобы поставить блок точно в одну ячейку, задайте grid-column и grid-row вместе. grid-column: 3 и grid-row: 2 = 3-я колонка, 2-я строка.

.quti1 {
  grid-column: 3;
  grid-row: 2;
}
hd
sd
mn
ft
grid-template-areas

Макет по именам ячеек

grid-template-areas даёт ячейкам имена и рисует весь макет страницы наглядно. Каждый элемент получает grid-area: имя, а контейнер записывает строки как текст. Так строятся header, sidebar, footer.

grid-template-areas:
  "hd hd"
  "sd mn"
  "ft ft";

Готовы? 🎯

Теперь проверьте знания: в практике из 20 уровней пишете код и расставляете блоки по ячейкам.

Поле display: grid

Отлично!

Блоки встали по ячейкам.

1Блок (grid-элемент) Дом (ячейка)
Задача
.maydon CSSВживую
Объяснение
Нужна помощь?