SimpleGrid

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

Основные свойства SimpleGrid

  1. columns Определяет количество колонок в сетке. Может быть числом или массивом для адаптивного поведения.

    <SimpleGrid columns={3} spacing={4}>
  <Box bg="tomato" height="80px" />
  <Box bg="blue.500" height="80px" />
  <Box bg="green.500" height="80px" />
</SimpleGrid>

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

  2. spacing Задаёт расстояние между элементами сетки, аналог свойства gap в CSS Grid. Можно задавать одно значение для всех размеров или массив для адаптивности.

    <SimpleGrid columns={[1, 2, 3]} spacing={[2, 4, 6]}>
  <Box bg="red.200" height="100px" />
  <Box bg="yellow.200" height="100px" />
  <Box bg="green.200" height="100px" />
</SimpleGrid>

    В этом примере сетка изменяет количество колонок и размер промежутка в зависимости от ширины экрана.

  3. minChildWidth Позволяет автоматически подбирать количество колонок в зависимости от ширины элементов. Если ширина контейнера больше, чем minChildWidth, элементы выстраиваются в несколько колонок.

    <SimpleGrid minChildWidth="150px" spacing="6">
  <Box bg="pink.300" height="120px" />
  <Box bg="purple.300" height="120px" />
  <Box bg="orange.300" height="120px" />
</SimpleGrid>

    Этот способ удобен для адаптивного дизайна, так как сетка сама рассчитывает количество колонок, чтобы сохранить минимальную ширину элемента.

  4. breakpoints и адаптивность SimpleGrid полностью поддерживает массивные пропсы для адаптивного дизайна. Можно задавать разное количество колонок для разных размеров экрана:

    <SimpleGrid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing={5}>
  {Array.from({ length: 8 }).map((_, i) => (
    <Box key={i} bg="teal.400" height="100px" />
  ))}
</SimpleGrid>

    Здесь base — для мобильных устройств, sm, md, lg — для progressively больших экранов.

Встроенные стили и оформление

SimpleGrid поддерживает все стандартные свойства стиля Chakra UI: bg, p, m, borderRadius, shadow и т.д. Это позволяет создавать визуально привлекательные сетки без написания CSS.

<SimpleGrid columns={3} spacing={4} p={5} bg="gray.50" borderRadius="md">
  <Box bg="red.400" height="80px" borderRadius="md" />
  <Box bg="blue.400" height="80px" borderRadius="md" />
  <Box bg="green.400" height="80px" borderRadius="md" />
</SimpleGrid>

Комбинирование с другими компонентами

SimpleGrid легко интегрируется с любыми Chakra-компонентами, например с Box, Card, Image или пользовательскими компонентами. Это даёт возможность создавать сложные макеты, включая карточки товаров, галереи изображений и информационные панели.

<SimpleGrid columns={[1, 2, 4]} spacing={6}>
  <Card>
    <CardHeader>
      <Heading size="md">Заголовок 1</Heading>
    </CardHeader>
    <CardBody>
      <Text>Содержимое карточки</Text>
    </CardBody>
  </Card>
  <Card>
    <CardHeader>
      <Heading size="md">Заголовок 2</Heading>
    </CardHeader>
    <CardBody>
      <Text>Содержимое карточки</Text>
    </CardBody>
  </Card>
</SimpleGrid>

Практические рекомендации

  • Для фиксированного числа колонок используйте columns.
  • Для адаптивных макетов предпочтительно minChildWidth.
  • Для контроля промежутков между элементами используйте spacing.
  • Для адаптивности применяйте объектные или массивные пропсы (columns={{ base: 1, md: 3 }}).
  • Сочетание SimpleGrid с Chakra-компонентами позволяет минимизировать CSS и ускоряет процесс верстки.

Отличие SimpleGrid от Grid

В отличие от компонента Grid, SimpleGrid:

  • Автоматически управляет количеством колонок через columns или minChildWidth.
  • Не требует явного задания templateColumns и других CSS Grid-свойств.
  • Идеально подходит для типовых сеток, где требуется равномерное распределение элементов с промежутками.

Примеры сложных сеток

  1. Галерея изображений с адаптивными колонками
<SimpleGrid minChildWidth="200px" spacing="8">
  {images.map((img, index) => (
    <Image key={index} src={img.src} alt={img.alt} borderRadius="lg" />
  ))}
</SimpleGrid>
  1. Дашборд с карточками разных размеров
<SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={6}>
  <Box bg="blue.300" height="120px" />
  <Box bg="green.300" height="200px" />
  <Box bg="purple.300" height="150px" />
  <Box bg="orange.300" height="100px" />
</SimpleGrid>

SimpleGrid обеспечивает быстрый, гибкий и чистый способ организации элементов в сетку, полностью используя преимущества адаптивности и встроенной системы стилей Chakra UI.

Оглавление