Grid

В Chakra UI Grid используется для построения сложных макетов с использованием строк и колонок, аналогично CSS Grid, но с интеграцией в систему компонентов React. Основной компонент — <Grid> — служит контейнером для элементов <GridItem> или любых дочерних компонентов, которым можно задавать позиционирование и размеры через пропсы.

import { Grid, GridItem, Box } from "@chakra-ui/react";

<Grid templateColumns="repeat(3, 1fr)" gap={4}>
  <GridItem w="100%" h="100px" bg="red.500" />
  <GridItem w="100%" h="100px" bg="green.500" />
  <GridItem w="100%" h="100px" bg="blue.500" />
</Grid>

Здесь templateColumns="repeat(3, 1fr)" создает три колонки одинаковой ширины. Проп gap={4} задает отступы между элементами сетки.

Настройка колонок и строк

  • templateColumns — определяет количество колонок и их ширину. Можно использовать:

    • repeat(n, 1fr) — n равных колонок
    • auto — ширина по содержимому
    • фиксированные значения (100px, 200px)

  • templateRows — аналогично, задает строки

  • autoFlow — определяет порядок заполнения сетки: row (по строкам) или column (по колонкам)

Пример с разной шириной колонок:

<Grid templateColumns="200px 1fr 2fr" gap={6}>
  <GridItem bg="yellow.300" h="100px" />
  <GridItem bg="teal.300" h="100px" />
  <GridItem bg="pink.300" h="100px" />
</Grid>

GridItem: позиционирование и размеры

Каждый <GridItem> может задавать позицию и размеры через строковые и колонковые свойства:

  • colSpan — количество колонок, которое занимает элемент
  • rowSpan — количество строк
  • colStart, colEnd, rowStart, rowEnd — позиция начала и конца элемента в сетке
<Grid templateColumns="repeat(4, 1fr)" gap={4}>
  <GridItem colSpan={2} bg="red.400" h="80px" />
  <GridItem colSpan={1} bg="blue.400" h="80px" />
  <GridItem colSpan={1} bg="green.400" h="80px" />
  <GridItem colSpan={4} bg="purple.400" h="50px" />
</Grid>

Элемент с colSpan={2} занимает две колонки, а элемент с colSpan={4} растягивается на всю ширину.

Responsive Grid

Chakra UI полностью поддерживает адаптивные сетки через массивы или объекты для пропсов. Это позволяет задавать разные значения для разных точек останова.

<Grid 
  templateColumns={{ base: "1fr", md: "repeat(2, 1fr)", lg: "repeat(4, 1fr)" }}
  gap={6}
>
  <GridItem bg="red.200" h="100px" />
  <GridItem bg="green.200" h="100px" />
  <GridItem bg="blue.200" h="100px" />
  <GridItem bg="yellow.200" h="100px" />
</Grid>
  • base — для мобильных устройств
  • md — для средних экранов
  • lg — для больших экранов

Это позволяет создавать гибкие макеты без медиа-запросов в CSS.

Выравнивание и растяжение элементов

Grid в Chakra UI наследует все возможности CSS Grid для выравнивания:

  • justifyItems — выравнивание элементов по горизонтали внутри ячеек (start, center, end, stretch)
  • alignItems — по вертикали (start, center, end, stretch)
  • justifyContent — выравнивание всей сетки по горизонтали
  • alignContent — выравнивание всей сетки по вертикали
<Grid
  templateColumns="repeat(3, 1fr)"
  justifyItems="center"
  alignItems="center"
  gap={4}
>
  <GridItem w="50px" h="50px" bg="red.300" />
  <GridItem w="50px" h="50px" bg="blue.300" />
  <GridItem w="50px" h="50px" bg="green.300" />
</Grid>

Элементы будут выровнены по центру ячеек, а сетка — по центру контейнера.

Auto-Placement и Grid Template Areas

Для сложных макетов удобно использовать именованные области через templateAreas:

<Grid
  templateAreas={`"header header"
                  "sidebar main"
                  "footer footer"`}
  gridTemplateRows="50px 1fr 30px"
  gridTemplateColumns="150px 1fr"
  gap={4}
>
  <GridItem area="header" bg="red.200" />
  <GridItem area="sidebar" bg="blue.200" />
  <GridItem area="main" bg="green.200" />
  <GridItem area="footer" bg="yellow.200" />
</Grid>
  • area — связывает GridItem с областью
  • templateAreas задает визуальную схему сетки, упрощая чтение макета

Gap, RowGap и ColumnGap

  • gap — общий отступ между элементами
  • rowGap — вертикальный отступ
  • columnGap — горизонтальный отступ
<Grid templateColumns="repeat(3, 1fr)" gap={6} rowGap={8} columnGap={4}>
  <GridItem bg="red.300" h="100px" />
  <GridItem bg="blue.300" h="100px" />
  <GridItem bg="green.300" h="100px" />
</Grid>

Использование с Box и Flex

Grid отлично комбинируется с <Box> и <Flex> для более сложных компонентов. Например, внутри ячейки Grid можно создать Flex-контейнер с вертикальным или горизонтальным расположением элементов.

<Grid templateColumns="repeat(2, 1fr)" gap={6}>
  <GridItem bg="purple.200" h="150px">
    <Flex direction="column" justify="center" align="center" h="100%">
      <Box bg="white" w="50px" h="50px" />
      <Box bg="gray.300" w="30px" h="30px" mt={2} />
    </Flex>
  </GridItem>
  <GridItem bg="orange.200" h="150px" />
</Grid>

Это позволяет создавать вложенные структуры и управлять выравниванием на нескольких уровнях одновременно.

Grid в Chakra UI сочетает гибкость CSS Grid с простотой и читаемостью React-компонентов, обеспечивая мощный инструмент для построения адаптивных и сложных макетов.

Оглавление