0

I'm working on a grid in SCSS using CSS grids. I would like it to have columns of different sizes, but with the possibility to have any sizes placed at any place (not sure if I'm totally clear...). I made a quick mockup to show you: Mockup grid

I'd like to have a 12 columns grid like this one, with columns having a width from 1 column to 12.

This is my code at the moment:

HTML

<div class="row">
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>

    <div class="col-2">col-2</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
    <div class="col-1">col-1</div>
</div>

SCSS

.row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 24px;
    row-gap: 24px;

    .col-1 {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .col-2 {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

But the result is just one column per row.

How could I do it to be "modular"?

Thank you for your answers!

0 Answers0