Grid.Row. Изменить стили, добавляющие отступ между колонками.

[m-a-bykovsky]

Описание

Предлагаю изменить подход к добавлению отступов между колонками (Grid.Col).

Сейчас для того, чтобы компенсировать padding у крайних колонок (слева у первой и справа у последней), используется отрицательные margin на Grid.Row : packages/grid/src/gutters.module.css.

При данном подходе общая ширина строки увеличивается на значение, используемое в margin. Например, при начальной ширине Grid.Row в 1000px и margin-left: -8px, margin-right: -8px она изменится на 1000+8+8 = 1016px.

Такое поведение может приводить к нежелательным последствиям, если родительский компонент Grid.Col тоже смотрит на его размеры, но не учитывает margin. Наглядный пример можно увидеть при использовании компонента Scrollbar: из-за "компенсации" отступов через отрицательный margin скролл появляется даже в случае, когда визуально контент колонок влезает в контейнер.

Внешний вид

Код для песочницы

render(() => {
    const styleCol = {
        background: 'var(--color-light-neutral-translucent-200)',
        textAlign: 'center',
    };
    const styleRow = { 
        background: 'var(--color-light-base-bg-primary)', 
    };
    const styleWrapper = { 
        background: 'var(--color-light-neutral-400)', 
    };

    return (
        <Scrollbar>
            <Grid.Row gutter={16}>
                {[1, 2, 3].map(key => (
                    <Grid.Col width='4' key={key}>
                        <div style={styleCol}>Grid.Col</div>
                    </Grid.Col>
                ))}
            </Grid.Row>
        </Scrollbar>
    );
});

Core-components: песочница

Десктоп

• OS: MacOS
• Browser: Google Chrome
• Version: 127.0.6533.120

Смартфон

Данных нет

Предлагаемое решение

В качестве альтернативы отрицательным margin packages/grid/src/gutters.module.css предлагаю скидывать padding для первой и последней колонки:

@for $i from 8 to 24 by 8 {
    .row.gutter-$(i) {
        & > .col {
            padding-left: calc($(i)px / 2);
            padding-right: calc($(i)px / 2);
        }
        & > .col:first-child {
            padding-left: var(--gap-0);
        }
        
        & > .col:last-child {
            padding-right: var(--gap-0);
        }
    }
}