Блог

Главная - Вопросы по программированию - адаптивная сетка в пользовательском интерфейсе chakra

адаптивная сетка в пользовательском интерфейсе chakra

#reactjs #chakra-ui

Вопрос:

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

 <SimpleGrid columns={[1, 2, 3, 4, 5, 6]} gap={5}>
   <Box>
      <Text as='h5' isTruncated fontWeight='bold' fontSize='large'>
        {note.title}
      </Text>
      <Text>{note.text}</Text>
    </Box>
</SimpleGrid>

Проблема в том, что компоненты коробки имеют одинаковую высоту

Комментарии:

1. Не могли бы вы поделиться своим образцом в codesandbox ?

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

Метки: