Show HN: Split-Grid Generator

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

    .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;
        }
    }

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.

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.