Grid-свойства

Chakra UI предоставляет мощные инструменты для работы с CSS Grid, позволяя создавать сложные сеточные макеты с минимальным количеством кода. Основным компонентом для сеток является <Grid>, который работает аналогично CSS-свойству display: grid.

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

<Grid templateColumns="repeat(3, 1fr)" gap={4}>
  <Box bg="tomato" height="100px" />
  <Box bg="blue.500" height="100px" />
  <Box bg="green.300" height="100px" />
</Grid>

В этом примере создается трехколоночная сетка, где каждая колонка занимает равную долю пространства благодаря 1fr. Свойство gap отвечает за промежутки между элементами сетки.

Свойство templateColumns и templateRows

  • templateColumns — определяет количество и ширину колонок.
  • templateRows — задает высоту рядов.

Примеры значений:

  • "repeat(3, 1fr)" — три равные колонки.
  • "100px 2fr 1fr" — первая колонка фиксированной ширины, вторая и третья распределяют оставшееся пространство.
  • "auto" — колонки подстраиваются под содержимое.
<Grid templateColumns="100px 2fr 1fr" templateRows="50px auto 100px" gap={2}>
  <Box bg="red.200" />
  <Box bg="yellow.200" />
  <Box bg="blue.200" />
</Grid>

Управление положением элементов: gridColumn и gridRow

Каждый дочерний элемент может занимать несколько колонок или рядов с помощью gridColumn и gridRow:

<Box gridColumn="1 / 3" gridRow="2 / 4" bg="purple.300" />

Здесь элемент начнется с первой колонки и займет две колонки (1 / 3), а по рядам займет вторую и третью (2 / 4).

Ключевые моменты:

  • Формат записи: "start / end"
  • Можно использовать ключевые слова: "span 2" для растягивания на 2 единицы
<Box gridColumn="span 2" bg="pink.200" />

Автоматическое размещение: autoFlow

Свойство gridAutoFlow управляет автоматическим порядком размещения элементов в сетке:

<Grid templateColumns="repeat(3, 1fr)" gap={4} autoFlow="row dense">
  <Box bg="red.300" />
  <Box bg="green.300" />
  <Box bg="blue.300" />
</Grid>

Возможные значения:

  • "row" — элементы добавляются по рядам (по умолчанию)
  • "column" — добавление по колонкам
  • "row dense" или "column dense" — плотное размещение с минимизацией пустых ячеек

Промежутки между элементами: gap, rowGap, columnGap

  • gap — общий промежуток между рядами и колонками
  • rowGap — расстояние между рядами
  • columnGap — расстояние между колонками
<Grid templateColumns="repeat(4, 1fr)" rowGap={6} columnGap={3}>
  <Box bg="teal.200" height="50px" />
  <Box bg="orange.200" height="50px" />
</Grid>

Фракционные единицы и minmax

Chakra UI поддерживает FR-единицы и функцию minmax() для гибких макетов:

<Grid templateColumns="repeat(3, minmax(100px, 1fr))" gap={4}>
  <Box bg="blue.100" />
  <Box bg="blue.200" />
  <Box bg="blue.300" />
</Grid>
  • Элементы будут иметь минимальную ширину 100px, но смогут расширяться до равного распределения пространства (1fr).

Ширина и высота отдельных ячеек: auto и max-content

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

<Grid templateColumns="auto max-content 1fr" gap={2}>
  <Box bg="red.100">Короткий текст</Box>
  <Box bg="green.100">Очень длинный текст, который занимает больше места</Box>
  <Box bg="blue.100" />
</Grid>
  • auto — размер подстраивается под контент
  • max-content — размер под наибольший элемент в колонке

Поддержка адаптивного дизайна

Chakra UI позволяет использовать массивы и объекты для адаптивных сеток:

<Grid
  templateColumns={{ base: "repeat(1, 1fr)", md: "repeat(3, 1fr)" }}
  gap={4}
>
  <Box bg="red.200" height="80px" />
  <Box bg="blue.200" height="80px" />
  <Box bg="green.200" height="80px" />
</Grid>
  • base — мобильная версия
  • md — планшет/десктоп
  • Позволяет создавать резиновый макет без медиа-запросов вручную

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

Компонент <GridItem> упрощает работу с элементами сетки:

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

<Grid templateColumns="repeat(4, 1fr)" gap={4}>
  <GridItem colSpan={2} bg="pink.200" />
  <GridItem colSpan={1} bg="blue.200" />
  <GridItem colSpan={1} bg="green.200" />
</Grid>
  • colSpan — количество колонок, которые занимает элемент
  • rowSpan — количество рядов

Центрирование и выравнивание: justifyItems, alignItems

Сетка поддерживает горизонтальное и вертикальное выравнивание:

<Grid
  templateColumns="repeat(3, 1fr)"
  gap={4}
  justifyItems="center"
  alignItems="center"
>
  <Box bg="red.200" height="50px" width="50px" />
  <Box bg="green.200" height="100px" width="50px" />
  <Box bg="blue.200" height="80px" width="50px" />
</Grid>
  • justifyItems — выравнивание по горизонтали внутри ячейки
  • alignItems — по вертикали

Grid-свойства Chakra UI позволяют создавать сложные и адаптивные макеты с минимальным кодом, комбинируя templateColumns, templateRows, gap, gridColumn, gridRow и адаптивные объекты. Использование <GridItem> и фракционных единиц делает сетки гибкими и управляемыми, обеспечивая современный дизайн без лишних CSS-оберток.

Оглавление