🔷 Блок: Grid / Сетка
📌 Что это
Grid — это блок Gutenberg для размещения нескольких блоков в виде сетки.
То есть элементы внутри Grid могут располагаться не просто в одну строку или столбик, а по ячейкам:
[Элемент 1] [Элемент 2] [Элемент 3]
[Элемент 4] [Элемент 5] [Элемент 6]Например:
карточки услуг;
карточки товаров;
блок преимуществ;
галерея из разных элементов;
сетка с иконками;
плитка с разделами сайта;
каталог;
портфолио.
Grid — это контейнерный блок, который помогает организовать несколько блоков внутри одной сеточной структуры. Его можно преобразовать в Group, Row или Stack без потери содержимого.
⚙️ Функции
Блок позволяет:
добавлять внутрь разные блоки;
располагать элементы в сетке;
управлять шириной и высотой элементов внутри контейнера;
настраивать количество колонок, если настройка доступна;
настраивать расстояние между элементами;
выравнивать элементы внутри сетки;
создавать одинаковые или разные по размеру ячейки;
менять фон Grid;
настраивать цвет текста;
настраивать padding / внутренние отступы;
настраивать margin / внешние отступы;
использовать wide width / full width, если тема поддерживает;
преобразовывать Grid в Group, Row, Stack, Cover или Columns;
добавлять CSS-класс в Advanced.
🎯 Зачем нужен
Чтобы сделать аккуратную сетку из повторяющихся элементов.
Например:
[Услуга 1] [Услуга 2] [Услуга 3]
[Услуга 4] [Услуга 5] [Услуга 6]Или:
[Иконка + текст] [Иконка + текст]
[Иконка + текст] [Иконка + текст]Grid особенно удобен, когда у тебя есть несколько похожих блоков, и ты хочешь выстроить их ровно и понятно.
📍 Где используется чаще всего
главная страница;
лендинги;
страницы услуг;
каталоги;
портфолио;
блоки преимуществ;
карточки товаров;
команда;
разделы сайта;
обучающие страницы;
страницы с подборками.
⚠️ Важно
Grid — это контейнер.
Внутрь него можно добавлять другие блоки:
Heading;
Paragraph;
Image;
Buttons;
Group;
Stack;
Row;
Cover.
Например:
Grid
├─ Stack: карточка 1
│ ├─ Image
│ ├─ Heading
│ └─ Paragraph
│
├─ Stack: карточка 2
│ ├─ Image
│ ├─ Heading
│ └─ Paragraph
│
└─ Stack: карточка 3
├─ Image
├─ Heading
└─ ParagraphТак можно сделать аккуратные карточки услуг или преимуществ.
⚠️ Grid или Columns?
Они похожи, но используются немного по-разному.
Columns лучше для простой структуры в несколько колонок:
[Текст] [Картинка]или:
[Колонка 1] [Колонка 2] [Колонка 3]Grid лучше для сетки из повторяющихся карточек:
[Карточка] [Карточка] [Карточка]
[Карточка] [Карточка] [Карточка]Простыми словами:
Columns = несколько колонок
Grid = полноценная сетка⚠️ Grid или Row?
Row — элементы идут в одну горизонтальную линию:
[Элемент 1] [Элемент 2] [Элемент 3]Grid — элементы могут идти в несколько строк и колонок:
[Элемент 1] [Элемент 2] [Элемент 3]
[Элемент 4] [Элемент 5] [Элемент 6]То есть:
Row = одна строка
Grid = сетка из строк и колонок⚠️ Grid или Gallery?
Gallery — для нескольких изображений.
Grid — для разных блоков.
Если у тебя только картинки:
GalleryЕсли у тебя карточки с картинкой, заголовком, текстом и кнопкой:
GridПример:
Grid
├─ Card: Image + Heading + Text + Button
├─ Card: Image + Heading + Text + Button
└─ Card: Image + Heading + Text + Button⚠️ Мобильная версия
Grid обязательно нужно проверять на телефоне.
На компьютере сетка может быть такой:
[1] [2] [3]
[4] [5] [6]А на телефоне может стать такой:
[1]
[2]
[3]
[4]
[5]
[6]Это нормально. Часто на мобильной версии сетка превращается в один столбик, чтобы контент было удобно читать.
⚠️ Тема может влиять
Возможности Grid могут зависеть от темы и версии WordPress.
Тема может влиять на:
количество доступных настроек;
ширину сетки;
расстояние между элементами;
wide/full width;
отступы;
цвета;
рамки;
скругления;
поведение на мобильной версии.
Если какой-то настройки нет, это не всегда ошибка. Возможно, текущая тема её не поддерживает.
🧠 Простыми словами
Grid — это блок для сетки.
Если нужно поставить элементы не просто в ряд, а аккуратной плиткой — используй Grid.
Например:
[Карточка] [Карточка] [Карточка]
[Карточка] [Карточка] [Карточка]Row — одна строка.
Stack — один столбик.
Columns — несколько колонок.
Grid — полноценная сетка.