HN Explorer

9 comments

[ 2.4 ms ] story [ 33.4 ms ] thread
nathancahill
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.

nameless912
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.
mnw21cam
Just looking at the title, I thought this was going to be about electricity.
coding123
I honestly thought it was about a split-phase inverter for grid-tie applications too.
trinovantes
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;
        }
    }
aeoleonn
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.

Ciantic
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.

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