Here's my codepen around a neat and simple css grid 12 columns layout system I am currently testing / playing around with in different content management systems:

It is all very brief and rough around the edges, but I am already stoked how the combination of inline-style css custom properties style="--span:6" and template-column: span var(--span) enables layout control without the need for special classes and css variations.

The basic idea is: We have "rows" and in a row "columns". Now these columns can have different widths. Say you want 3 columns side-by-side, each one the same width as the others. Or two columns. Or maybe two columns, one 2/3 of the row's width, and the other 1/3. If we imagine that or "row" is intersected by a column-grid with 12 columns, then the above use cses for the columns in that row would be:
3 equal columns: 12 / 3 = 4 => so each column "spans" 4 of the grid
2 equal columns: 12 / 2 = 6 => span 6 each.
2/3 | 1/3: 12 / 3*2 = 8 | 12 / 3 = 4 => span 8 | span 4

Lets put this into modern css:

    .row {
        display: grid; /* the magic */
        grid-gap: 1rem; /* space between the grid columns */
        grid-template-columns: repeat(12,1fr); /* make 12 columns, each one a fraction wide */
    }
 
    .column {
        grid-column: span 12; /* make the column span over 12 grid columns aka 100% */
        /* variants: */
        /* grid-column: span 6; = span over 6 grid columns aka 50% */
        /* grid-column: span 4; = span over 4 grid columns aka 33% */
    }

Now this is the basic setup. To make it flexible, we need to change that static "12" in grid-column: span 12; to something that can be influenced when putting out the html markup.
This is where the css custom properties come in.

    :root {
        --span: 12; /* define the --span property as a default */
    }
    .column {
        grid-column: span var(--span, 12); /* use the custom property (and set a fallback if that property isn't available somehow  */
    }

Now with this in place, we can declare the property's value on the html-Element as an inline style:

    <div class="row">
        <div class="column" style="--span:8">This will be 2/3 wide</div>
        <div class="column" style="--span:4">This will be 1/3 wide</div>
    </div>

And tchakka, this is all that's needed for a very simple but flexible layout system.
In the code-pen demo linked above I have included more custom properties and a bit of break point logic in the css for different column-widths in different viewport sizes.

Why this is interesting from a CMS point of view: If we can add as many columns as we need, and have a chance to tell each individual column how to behave on the grid, this is much more flexible than the alternative to set a fixed layout (like for example the 2/3 | 1/3) at the row. Which could be easily done with a css-class. <div class="row-2-1">…</div> and then maybe

    .row-2-1 > .column::nth-of-type(odd) {
        grid-column: span 8;
    }
    .row-2-1 > .column::nth-of-type(even) {
        grid-column: span 4;
    }

But you can already see in that small example that this is not as flexible. What if you have three columns and maybe want the third column to span the full width? With such a container-layout class this is not possible (without adding more classes for overrides and exceptions). In the example with the custom property this use case is easy

    <div class="row">
        <div class="column" style="--span:8">This will be 2/3 wide</div>
        <div class="column" style="--span:4">This will be 1/3 wide</div>
        <div class="column" style="--span:12">This will be full width</div>
    </div>

I think this offers a great way to prototype, or, if the cms is able to abstract away the stuff into easy-to-use controls, this gives the editor more freedom to arrange their contents.
(which also can be a very bad idea, I know, depending on the editor's layout skills ;-)