3 ms·

Show HN: Split-Grid Generator

89 points by nathancahill 5y ago

nathancahill 5y ago
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 5y ago
  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 5y ago
Just looking at the title, I thought this was going to be about electricity.
- coding123 5y ago
  I honestly thought it was about a split-phase inverter for grid-tie applications too.
trinovantes 5y ago
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 5y ago
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 5y ago
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 5y ago
Love these tools. Any tools that help people use flex/grid is A++++ in my book.
maxwellwhite 5y ago
For anyone else that had trouble with the link for unknown reasons: https://split.js.org/#/split-grid https://split.js.org/#/split-grid

89 points by nathancahill 5y ago

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 5y ago
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 5y ago

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

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

trinovantes 5y ago

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 5y ago

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 5y ago

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 5y ago

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

maxwellwhite 5y ago

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