[HN Gopher] Show HN: Split-Grid Generator
___________________________________________________________________
Show HN: Split-Grid Generator
Author : nathancahill
Score : 86 points
Date : 2021-05-05 10:34 UTC (12 hours ago)
(HTM) web link (split.js.org)
(TXT) w3m dump (split.js.org)
| aeoleonn wrote:
| 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.
| maxwellwhite wrote:
| For anyone else that had trouble with the link for unknown
| reasons: https://split.js.org/#/split-grid
| nathancahill wrote:
| 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 wrote:
| 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 wrote:
| Just looking at the title, I thought this was going to be about
| electricity.
| coding123 wrote:
| I honestly thought it was about a split-phase inverter for
| grid-tie applications too.
| trinovantes wrote:
| 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; }
| }
| Ciantic wrote:
| 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 wrote:
| Love these tools. Any tools that help people use flex/grid is
| A++++ in my book.
___________________________________________________________________
(page generated 2021-05-05 23:01 UTC)