Компонент Grid в WordPress: Полное руководство с примерами

Главная - WordPress Codex - Компонент Grid в WordPress: Полное руководство с примерами
Доступна с версии: 5.0
Раздел: Gutenberg
Написал: Александр Сокирка

Компонент Grid в WordPress предоставляет возможность создавать гибкую компоновку контента в виде сетки. Это экспериментальная функция, что означает, что текущая реализация может быть изменена в будущих версиях. Тем не менее, Grid уже может использоваться для создания интересных макетов с гибкими настройками по количеству колонок, строк, отступов и выравниванию элементов.

Основное использование

Для начала добавим Grid в компонент React. В примере ниже создаем простую сетку из трех текстовых элементов.

import {
    __experimentalGrid as Grid,
    __experimentalText as Text,
} from '@wordpress/components';

function Example() {
    return (
        <Grid columns={3}>
            <Text>Creativity</Text>
            <Text>Inspires</Text>
            <Text>Innovation</Text>
        </Grid>
    );
}

Теперь рассмотрим каждый параметр компонента Grid.

Параметры компонента

1. align

  • Тип: CSS['alignItems']
  • Описание: Определяет вертикальное выравнивание элементов внутри сетки по оси блока (align-items в CSS).
  • Обязательный: Нет
<Grid columns={3} align="center">
    <Text>Learn</Text>
    <Text>Code</Text>
    <Text>Grow</Text>
</Grid>

2. alignment

  • Тип: GridAlignment
  • Описание: Задает горизонтальное и вертикальное выравнивание элементов сетки одновременно.
  • Обязательный: Нет
<Grid columns={2} alignment="center">
    <Text>Fast</Text>
    <Text>Reliable</Text>
</Grid>

3. columnGap

  • Тип: CSSProperties['gridColumnGap']
  • Описание: Определяет отступ между колонками в сетке (grid-column-gap в CSS).
  • Обязательный: Нет
<Grid columns={4} columnGap="20px">
    <Text>Apple</Text>
    <Text>Banana</Text>
    <Text>Cherry</Text>
    <Text>Date</Text>
</Grid>

4. columns

  • Тип: number
  • Описание: Определяет количество колонок в сетке.
  • Обязательный: Нет
  • Значение по умолчанию: 2
<Grid columns={4}>
    <Text>Red</Text>
    <Text>Green</Text>
    <Text>Blue</Text>
    <Text>Yellow</Text>
</Grid>

5. gap

  • Тип: number
  • Описание: Задает отступ между всеми элементами сетки (аналогично свойству gap в CSS).
  • Обязательный: Нет
  • Значение по умолчанию: 3
<Grid columns={3} gap={10}>
    <Text>Art</Text>
    <Text>Music</Text>
    <Text>Dance</Text>
</Grid>

6. isInline

  • Тип: boolean
  • Описание: Если true, изменяет отображение CSS с grid на inline-grid.
  • Обязательный: Нет
<Grid columns={2} isInline>
    <Text>Inline</Text>
    <Text>Grid</Text>
</Grid>

7. justify

  • Тип: CSS['justifyContent']
  • Описание: Определяет горизонтальное выравнивание элементов внутри сетки (justify-content в CSS).
  • Обязательный: Нет
<Grid columns={3} justify="space-between">
    <Text>North</Text>
    <Text>Center</Text>
    <Text>South</Text>
</Grid>

8. rowGap

  • Тип: CSSProperties['gridRowGap']
  • Описание: Определяет отступ между строками (grid-row-gap в CSS).
  • Обязательный: Нет
<Grid columns={2} rowGap="15px">
    <Text>Row 1</Text>
    <Text>Row 2</Text>
</Grid>

9. rows

  • Тип: number
  • Описание: Задает количество строк в сетке.
  • Обязательный: Нет
<Grid columns={2} rows={3}>
    <Text>Spring</Text>
    <Text>Summer</Text>
    <Text>Autumn</Text>
    <Text>Winter</Text>
</Grid>

10. templateColumns

  • Тип: CSS['gridTemplateColumns']
  • Описание: Определяет шаблон для колонок в сетке (grid-template-columns в CSS).
  • Обязательный: Нет
<Grid templateColumns="1fr 2fr 1fr">
    <Text>Left</Text>
    <Text>Center</Text>
    <Text>Right</Text>
</Grid>

11. templateRows

  • Тип: CSS['gridTemplateRows']
  • Описание: Определяет шаблон для строк в сетке (grid-template-rows в CSS).
  • Обязательный: Нет
<Grid templateRows="auto 100px auto">
    <Text>Header</Text>
    <Text>Content</Text>
    <Text>Footer</Text>
</Grid>

Пример использования с настройкой всех параметров

Теперь создадим пример, в котором будем использовать все доступные параметры для компонента Grid:

import { __experimentalGrid as Grid, __experimentalText as Text } from '@wordpress/components';

function CustomGrid() {
    return (
        <Grid
            columns={3}
            rows={2}
            columnGap="20px"
            rowGap="15px"
            gap={5}
            align="center"
            alignment="center"
            justify="center"
            templateColumns="1fr 1fr 1fr"
            templateRows="auto auto"
            isInline={false}
        >
            <Text>Learning</Text>
            <Text>React</Text>
            <Text>Components</Text>
            <Text>For</Text>
            <Text>WordPress</Text>
            <Text>Developers</Text>
        </Grid>
    );
}

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

Заключение

Компонент Grid предоставляет гибкие возможности для создания макетов с сеткой в WordPress. Вы можете использовать его для создания адаптивных интерфейсов и улучшения визуального восприятия контента. С помощью параметров выравнивания, отступов и шаблонов Grid позволяет точно настраивать внешний вид, что делает его мощным инструментом для разработчиков.

Стартовая премиум тема для WordPress
Демо импорт тестового контента в 1 клик.
SEO оптимизированный и валидный код.
Множество готовых стартовых сайтов.
Лучшая документация и поддержка.
Опции персонализации контента.
Креативный и современный дизайн.
Тема для WordPress

Дополнительно по: Gutenberg