Live data from Hacker News

Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

github.com

21–30 of 41 posts

Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

#21
post #19

Earlier quoted context omitted.

+1 - I recently went looking for a CSS framework (I was still in the “Bootstrap” mindset), and ultimately decided on vanilla CSS grid + flexbox. If anyone is looking for a resource to learn CSS grid, I highly recommend Grid Garden: http://cssgridgarden.com/

I just started this tutorial. Thats is a "why", not a "how"... So maybe I can ask here. Why grid-column start include the value and grid column end exclude it... In fact where there is a ressource for understanding css logic on the internet?

> Why grid-column start include the value and grid column end exclude it

All CSS grid properties are defined in terms of grid "lines", not cells. If you have a grid of 2x2 cells, there are actually 3 vertical lines and 3 horizontal lines:

    1 2 3
  1 ┌─┬─┐
  2 ├─┼─┤
  3 └─┴─┘
"grid-column-start: x" means "this area starts the x vertical line"

"grid-column-end: y" means "this area ends at the y vertical line"

As you can see, there is no possible ambiguity here on whether you mean "inclusive" or "exclusive" like there would be if you referred to cells (which is why you had this question). That's the reason they chose to go with the "lines" model.

> In fact where there is a ressource for understanding css logic on the internet?

Usually each CSS spec has a rationale and some introduction to the "why" and the "thinking model" of the spec. For CSS grid you may look at [1].

[1] https://www.w3.org/TR/css-grid-1/#grid-concepts

Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

#22
Now that I have a bunch of knowledgeable people in one thread.

Anyone know of a good grid layout library/framework.

With grid i don't mean the css syntax version but the actual visual design grid that gives you something like:

https://cl.ly/a01ae1db0240

Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

#24

Now that I have a bunch of knowledgeable people in one thread. Anyone know of a good grid layout library/framework. With grid i don't mean the css syntax version but the actual visual design grid that gives you something like: https://cl.ly/a01ae1db0240

Not sure what your question is. You want something like a 12 column grid? Or the visual lines?

Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

#25

I spent some time trying to build a simple grid layout with dynamic width and height items in order for the layout to naturally flow responsively. Most libraries—like this one—require fixed width items or fixed width containers with fluid items. Fully responsive turned out to be a lot harder than I thought it would be due to lots of rabbit holes, but the algorithm was fairly straightforward. My first approach was to…

I've experimented with fully responsive layouts too for my website (http://www.uptopnews.com) but at the end I just used css flex gird. I almost build a comment section where the comments are cards in a grid but that rabbit hole was too deep.

Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

#26

Now that I have a bunch of knowledgeable people in one thread. Anyone know of a good grid layout library/framework. With grid i don't mean the css syntax version but the actual visual design grid that gives you something like: https://cl.ly/a01ae1db0240

Not sure what your question is. You want something like a 12 column grid? Or the visual lines?

The visual lines. I seem to remember a few frameworks i saw a while back which allow you to control these grid lines and help you do them according to the golden means.

Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

#28

For those wondering why not just use CSS Grid -- it's not build for that[0] (see @rachelandrew's comment). It's not explained on the repo README but the author goes into it on the explanation blog post. As mentioned, Masonry[1] is the other famous library for doing this. Magic Grid also has a Vue port[2] if you're into that. [EDIT] - PR just got merged, explanation of this stuff is on the Github README now [0]: https…

[deleted]

Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

#29

Now that I have a bunch of knowledgeable people in one thread. Anyone know of a good grid layout library/framework. With grid i don't mean the css syntax version but the actual visual design grid that gives you something like: https://cl.ly/a01ae1db0240

I made a grid overlay tool years ago, perhaps something in there may be of use? https://devgrow.com/griddy-overlay/

Re: Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts

#30

For those wondering why not just use CSS Grid -- it's not build for that[0] (see @rachelandrew's comment). It's not explained on the repo README but the author goes into it on the explanation blog post. As mentioned, Masonry[1] is the other famous library for doing this. Magic Grid also has a Vue port[2] if you're into that. [EDIT] - PR just got merged, explanation of this stuff is on the Github README now [0]: https…

Although I've read through the "css grid isn't meant to do this details", you can get fairly close to this with pure css grid, see here: https://github.com/wesbos/css-grid/blob/master/20%20-%20CSS%...
Post reply on HN