Home

🔷 Блок: Row / Ряд

📌 Что это

Row — это блок Gutenberg для размещения нескольких блоков в одну горизонтальную линию.

То есть элементы внутри Row идут слева направо.

Например:

логотип + меню;
иконка + текст;
кнопка + кнопка;
картинка + короткий текст;
цена + кнопка;
несколько ссылок в одну строку;
элементы шапки сайта.

Простыми словами:

Row = контейнер, где блоки стоят в ряд.

⚙️ Функции

Блок позволяет:

добавлять внутрь разные блоки;
располагать элементы горизонтально;
настраивать расстояние между элементами;
выравнивать элементы по левому краю, центру или правому краю;
распределять элементы по ширине;
выравнивать элементы по вертикали;
менять фон Row;
настраивать цвет текста;
настраивать padding / внутренние отступы;
настраивать margin / внешние отступы;
добавлять рамку;
добавлять скругление углов;
использовать wide width / full width, если тема поддерживает;
добавлять CSS-класс в Advanced.

🎯 Зачем нужен

Чтобы поставить несколько элементов рядом, а не друг под другом.

Например:

[Иконка] [Текст]

или:

[Кнопка 1] [Кнопка 2]

или:

[Логотип] [Меню] [Кнопка]

Row нужен, когда элементы должны восприниматься как одна горизонтальная группа.

📍 Где используется чаще всего

шапка сайта;
меню;
блоки с иконками;
CTA-блоки;
кнопки рядом;
маленькие карточки;
строки контактов;
социальные иконки;
футер;
панели навигации;
короткие информационные блоки.

⚠️ Важно

Row похож на Group, но с конкретным поведением.

Group — универсальный контейнер.
Row — контейнер, где элементы идут горизонтально.

Пример:

Row
 ├─ Image / Icon
 ├─ Paragraph
 └─ Button

На странице это будет выглядеть примерно так:

[Иконка]  Текст  [Кнопка]

⚠️ Row или Group?

Используй Group, если нужно просто объединить блоки.

Например:

Group
 ├─ Heading
 ├─ Paragraph
 └─ Buttons

Используй Row, если нужно поставить блоки в одну линию.

Например:

Row
 ├─ Logo
 ├─ Navigation
 └─ Button

Простыми словами:

Group = коробка
Row = коробка, где всё стоит в ряд

⚠️ Row или Columns?

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

Row лучше для маленьких элементов в одну линию:

[Иконка] [Текст] [Кнопка]

Columns лучше для больших секций:

[Большой текстовый блок] [Большая картинка]

То есть:

Row = мелкие элементы в строку
Columns = полноценные колонки с контентом

⚠️ Row или Stack?

Row — элементы идут горизонтально.

[Элемент 1] [Элемент 2] [Элемент 3]

Stack — элементы идут вертикально.

[Элемент 1]
[Элемент 2]
[Элемент 3]

Они противоположны по направлению.

⚠️ Мобильная версия

На мобильном Row может вести себя по-разному в зависимости от темы и настроек.

Иногда элементы остаются в одну строку.
Иногда могут переноситься на следующую строку.
Иногда становятся слишком сжатыми.

Поэтому Row обязательно нужно проверять на телефоне.

Особенно если внутри:

много кнопок;
длинный текст;
меню;
несколько иконок;
логотип + кнопка + текст.

⚠️ Тема может влиять

Тема может влиять на:

расстояние между элементами;
выравнивание;
перенос элементов;
доступные настройки отступов;
ширину Row;
wide/full width;
цвета;
рамки;
скругления.

Если какой-то настройки нет, это не обязательно ошибка. Возможно, тема её не поддерживает.

🧠 Простыми словами

Row — это блок для размещения элементов в одну строку.

Если нужно поставить блоки рядом слева направо — используй Row.