Understanding how the Grid System works

[realsama]

I am trying to use the grid system but I observed some weird behaviour. The below code produces a perfectly split screen.

<Grid fullWidth noGutter>
    <Row noGutter style="background-color: yellowgreen;">
        <Column sm={0} md={8} lg={8} xlg={8} max={8}>
            <div class="title-column" />
        </Column>
        <Column sm={12} md={8} lg={8} xlg={8} max={8} style="background-color: red;">
            <div>
                <h1>Hello World</h1>
            </div>
        </Column>
    </Row>
</Grid>

Using 6 and 6 for the columns leaves some space and only 8 and 8 works for my screen size. I noticed that this doesn't work on smaller devices like a tablet and their total grid size doesn't seem to be 16, unlike my PC.

How do I set the grid size to always be 12 so that design and appearance can be more predictable?

[alkanna]

Not a solution at all, but I've been using this grid instead : https://svelte-grid-responsive.netlify.app/

[realsama]

Not a solution at all, but I've been using this grid instead : https://svelte-grid-responsive.netlify.app/

Thanks for your reply. I will check the link out. But can you also explain why this issue happens?

[tmarsik42]

Take a look at carbon design guidelines. There are 16 columns from lg breakpoint up, md and sm breakpoints are 8 and 4 columns respectively. https://www.carbondesignsystem.com/guidelines/2x-grid/overview/#breakpoints

I'm not sure if you can change it, there was a flag to set no of columns to 16 back then. Maybe there's something similar now. Even though I think it'd be better to either embrace carbon's 2x grid or not use it at all. https://github.com/carbon-design-system/carbon/blob/main/docs/migration/10.x-grid.md