Say we have a grid that contains an aside and main. The CSS looks like this:

.wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1rem;
}

This will break on small viewport sizes due to the lack of space. To avoid such an issue, always use a media query when using CSS grid like the above.

@media (min-width: 600px) {
    .wrapper {
        display: grid;
        grid-template-columns: 250px 1fr;
        gap: 1rem;
    }
}

Examples and use cases

Main and aside

In the following demo, try to resize the handler, you will notice that the grid will keep the two columns even though the space isn't enough. This will result in a horizontal scrolling.

When the "Toggle Defensive" is active, it will only add the grid if the viewport size is larger at a specific point.