CSS сетка с фиксированной высотой

Вопрос или проблема

import React from 'react';
import {Paper, Box} from '@mui/material';

const cardConfiguration = [
    {id: '1', height: '40.6vh', gridColumn: '1 / span 5', gridRow: '1 / span 1'},
    {id: '2', height: '57.5vh', gridColumn: '1 / span 5', gridRow: '2 / span 1'},
    {id: '3', height: '49.1vh', gridColumn: '6 / span 5', gridRow: '1 / span 1'},
    {id: '4', height: '49.1vh', gridColumn: '6 / span 5', gridRow: '2 / span 1'},
    {id: '5', height: '100vh', gridColumn: '11 / span 2', gridRow: '1 / span 2'},
];

export const MainContent = () => (
    <Box
        sx={{
            display: 'grid',
            gridTemplateColumns: 'repeat(12, 1fr)',
            gap: 2,
            bgcolor: '#080D1B',
            px: 3,
        }}
    >
        {cardConfiguration.map((card) => (
            <Paper
                key={card.id}
                sx={{
                    bgcolor: '#292D3E',
                    borderRadius: '12px',
                    height: card.height,
                    gridColumn: card.gridColumn,
                    gridRow: card.gridRow,
                }}
            >
                {card.id}
            </Paper>
        ))}
    </Box>
);

Ответ или решение

Использование CSS Grid Layout для создания таблицы с фиксированной высотой является отличным решением для динамической компоновки интерфейса в React-приложениях. В вашем случае вы хотите добиться "сжатого" внешнего вида, то есть избежать лишних пробелов между элементами. Давайте разберем, как это сделать, используя ваш код и применяя необходимые стили.

1. Анализ текущего кода

Ваш текущий код использует React и Material-UI для реализации сетки, где каждый элемент отображается в виде карточек с определенной высотой и расположением. Вы уже правильно задали сетку с использованием gridTemplateColumns и определили высоту карточек в массиве cardConfiguration.

2. Устранение пробелов

Чтобы устранить пробелы между элементами в сетке, необходимо обратить внимание на два аспекта: отступы и границы. В данном случае, ключевые моменты:

• Убедитесь, что ваш Box не имеет дополнительных отступов (padding) и границ.
• Установите свойство gap в 0 (если хотите полностью убрать промежутки между элементами).
• Избавьтесь от любых дополнительных внешних отступов для карточек.

3. Обновленный код

Вот обновленный код, который учитывает вышеупомянутые рекомендации:

import React from 'react';
import { Paper, Box } from '@mui/material';

const cardConfiguration = [
    { id: '1', height: '40.6vh', gridColumn: '1 / span 5', gridRow: '1 / span 1' },
    { id: '2', height: '57.5vh', gridColumn: '1 / span 5', gridRow: '2 / span 1' },
    { id: '3', height: '49.1vh', gridColumn: '6 / span 5', gridRow: '1 / span 1' },
    { id: '4', height: '49.1vh', gridColumn: '6 / span 5', gridRow: '2 / span 1' },
    { id: '5', height: '100vh', gridColumn: '11 / span 2', gridRow: '1 / span 2' },
];

export const MainContent = () => (
    <Box
        sx={{
            display: 'grid',
            gridTemplateColumns: 'repeat(12, 1fr)',
            gap: 0,  // Устанавливаем пробелы между элементами в 0
            bgcolor: '#080D1B',
            px: 0,   // Убираем внутренние отступы
            m: 0,    // Убираем внешние отступы
        }}
    >
        {cardConfiguration.map((card) => (
            <Paper
                key={card.id}
                sx={{
                    bgcolor: '#292D3E',
                    borderRadius: '12px',
                    height: card.height,
                    gridColumn: card.gridColumn,
                    gridRow: card.gridRow,
                    m: 0, // Убираем внешний отступ у карточек
                }}
            >
                {card.id}
            </Paper>
        ))}
    </Box>
);

4. Конечный результат

После внесения этих изменений ваша таблица должна выглядеть более компактной, без промежутков между карточками. Использование установки gap: 0 и убирание внутренних и внешних отступов (px: 0 и m: 0) значительно сократит расстояние между элементами.

5. Вывод

CSS Grid Layout предоставляет гибкие возможности для создания адаптивных интерфейсов. Используя предложенные стили и настройки, вы сможете добиться желаемого внешнего вида без лишних пробелов. Не забудьте протестировать ваше приложение в различных разрешениях экрана, чтобы убедиться, что дизайн остается отзывчивым и компактным.

Если у вас возникнут дополнительные вопросы по реализации, не стесняйтесь обращаться за помощью!