A very simple grid system built with SASS and CSS grid

grid.scss

$columns: 12;
$gap: 30px;
$breakpoints: (
    xs: 480px,
    sm: 768px,
    md: 960px,
    lg: 1170px,
    xl: 1280px
);

@mixin create-selectors($breakpoint: null) {
    $infix: if($breakpoint == null, '', '-#{$breakpoint}');

    @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
            grid-column-end: span $i;
        }
        .col-offset#{$infix}-#{$i} {
            grid-column-start: $i + 1;
        }
        .row#{$infix}-#{$i} {
            grid-row-end: span $i;
        }
        .row-offset#{$infix}-#{$i} {
            grid-row-start: $i + 1;
        }
    }
}

.grid {
    display: grid;
    grid-template-columns: repeat($columns, 1fr);
    grid-gap: $gap;
    gap: $gap;
}

@include create-selectors;

@each $breakpoint, $width in $breakpoints {
    @media (min-width: $width) {
        @include create-selectors($breakpoint);
    }
}

Thank you for sharing, do you have any idea how to implement row with this grid?

@nguyenvu you can create a row like this:

<div class="grid">
    <div class="col-12 col-md-8">I'm a column 2/3 wide</div>
    <div class="col-12 col-md-4">I'm a column 1/3 wide</div>
</div>

In this way, you create a row of which the children stack on top of one another on mobile devices, and become columns on desktop computers.

Does that help?

Thank you! I keep playing with this and trying to figure out to use .row-l-* but yes, it helps a lot :D

Very simple and good idea. But unfortunately at a browser width below 337px (Smallest iPhone: 320px) the window becomes scrollable, because the content does not shrink. It is related to the gap. Unfortunately I still have too little knowledge to fix this grid problem. @wiegertschouten do you have an idea or someone else?

This is my current markup:

<div class="grid">
    <div class="col-12">I'm a column</div>
</div>

@arsors You are right, it's related to the gap. That is a bit of a shortcoming of this idea. You can solve it by adding the following after the initial code:

@media (max-width: 400px) {
    .grid {
        grid-gap: 20px;
        gap: 20px;
    }
}

This makes the gap somewhat smaller on devices below 400px.

@wiegertschouten Thank you for the answer. It seems to be a general problem with grids and gaps. I have already solved it like your idea. Alternatively you could use: gap: min($gap, 5%);, but this results in a strange spacing.

Edit: After a bit of testing i found out that gap: clamp(15px, 2vw, $gap); is working pretty ok (not perfect).

@wiegertschouten This is fantastic- thank you for sharing! I'm using a variation of @arsors's approach to address the gap issue- setting my default gap to 50px and using gap: clamp(15px, 4vw, $gap); seems to work ok in my case.

@nickpish Glad you found it helpful, and thanks for sharing your solution!