We're pushing the envelope with CSS grid in interesting ways to make it resizable along any dimension. The end result is content agnostic since we're only touching grid properties.

The focus is on building a super minimal yet robust tool. JSFiddle uses the previous iteration of this library, Split.js.

Hey, just wanted to say thank you for this! I'm working on solving a similar problem for a side project (though in Clojurescript) and this is super helpful for understanding better how the grid works. I will definitely be crediting you once I have something publishable.

I think my favorite use of display:grid is being able to "visually" see how many columns I'm using on every media query as opposed to trying to do mental division on multiples of 12 (xl-col-2 lg-col-3 md-col-4 sm-col-6 col-12)

    .parent {
        grid-template-columns: 1fr;
        display: grid;

        @media (min-width: $breakpoint-sm-min) {
            grid-template-columns: 1fr 1fr;
        }
        @media (min-width: $breakpoint-md-min) {
            grid-template-columns: 1fr 1fr 1fr;
        }
        @media (min-width: $breakpoint-lg-min) {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
        @media (min-width: $breakpoint-xl-min) {
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        }
    }

Just looking at the title, I thought this was going to be about electricity.

I honestly thought it was about a split-phase inverter for grid-tie applications too.

I wish I could add text to the example grid inside, to test how it behaves.

Grid has a problem with long texts without spaces. (Finnish language tend to have those and I find grid sometimes difficult to use). It can be fixed if you use minmax instead of 1fr.

E.g. grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) works for two column layout that doesn't break with overly long words.

Fantastic, simple tool! Definitely saving it to my notes for future reference.

Note: the min & max size settings... I don't quite understand.

- What are the units?

- does it refer to the min / max of a particular grid box, or the screen?

- Once I start messing with min & max, the UI of the grid drag & drop gets buggy.

But, still, a great looking tool for quickly setting up basic css grids without having to fiddle with code.

For anyone else that had trouble with the link for unknown reasons: https://split.js.org/#/split-grid

Love these tools. Any tools that help people use flex/grid is A++++ in my book.