Show HN: Layoutit – An interactive CSS Grid generator • Hacker News Board

Re: Show HN: Layoutit – An interactive CSS Grid generator

#21

Post by detaro » Thu, Jul 26, 2018, 5:14 PM UTC

asdojasdosadsa wrote: post #20

reaperducer wrote: post #18

If you're taking requests, a similar page for Flexbox would be the bee's knees.

Is there a case you would prefer Flexbox over Grid?

Flexbox generally is better if you have a dynamic number of elements. Grid isn't a replacement for flexbox.

Re: Show HN: Layoutit – An interactive CSS Grid generator

#22

Post by zlepper » Thu, Jul 26, 2018, 5:49 PM UTC

asdojasdosadsa wrote: post #20

reaperducer wrote: post #18

If you're taking requests, a similar page for Flexbox would be the bee's knees.

Is there a case you would prefer Flexbox over Grid?

IE support? Only an old version of grid is supported in IE. One which is not compatible with the new spec.

Re: Show HN: Layoutit – An interactive CSS Grid generator

#23

Post by gr3yh47 » Thu, Jul 26, 2018, 5:50 PM UTC

reaperducer wrote: post #18

If you're taking requests, a similar page for Flexbox would be the bee's knees.

not exactly what you're looking for but kind of close

http://flexboxfroggy.com/

Re: Show HN: Layoutit – An interactive CSS Grid generator

#24

Post by sarreph » Thu, Jul 26, 2018, 5:50 PM UTC

asdojasdosadsa wrote: post #20

reaperducer wrote: post #18

If you're taking requests, a similar page for Flexbox would be the bee's knees.

Is there a case you would prefer Flexbox over Grid?

Browser support as well. Grid is only about https://caniuse.com/#feat=css-grid

Re: Show HN: Layoutit – An interactive CSS Grid generator

#25

Post by ak39 » Thu, Jul 26, 2018, 6:01 PM UTC

Does CSS grid support size transition animations?

Re: Show HN: Layoutit – An interactive CSS Grid generator

#26

Post by ghostbrainalpha » Thu, Jul 26, 2018, 6:03 PM UTC

peterjonesio wrote: post #6

Nice tool, will take a proper look at this later this evening. Reminds me of this offline tool: https://cssgrid.cc/ which is also quite well rated

Do you actually use that tool?

It looks promising but I really don't like having to download software to make a web layout.

Re: Show HN: Layoutit – An interactive CSS Grid generator

#27

Post by trumped » Thu, Jul 26, 2018, 6:08 PM UTC

orliesaurus wrote: post #15

The site is great, but the name of the domain is unfortunate

Do you see it everywhere?

Re: Show HN: Layoutit – An interactive CSS Grid generator

#28

Post by molszanski » Thu, Jul 26, 2018, 6:14 PM UTC

detaro wrote: post #21

asdojasdosadsa wrote: post #20

Earlier quoted context omitted.

Is there a case you would prefer Flexbox over Grid?

Flexbox generally is better if you have a dynamic number of elements. Grid isn't a replacement for flexbox.

Grid can also be amazing for dynamic number of elements! Check this out: https://gridbyexample.com/examples/example17 Grid has an amazing repeat feature: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat Very powerful.

Re: Show HN: Layoutit – An interactive CSS Grid generator

#29

Post by ljoshua » Thu, Jul 26, 2018, 6:18 PM UTC

asdojasdosadsa wrote: post #20

reaperducer wrote: post #18

If you're taking requests, a similar page for Flexbox would be the bee's knees.

Is there a case you would prefer Flexbox over Grid?

Here's a great explanation from Jen Simmons that really helped me understand the differences and respective strengths and weaknesses of each:

https://www.youtube.com/watch?v=hs3piaN4b5I

Re: Show HN: Layoutit – An interactive CSS Grid generator

#30

Post by swaggyBoatswain » Thu, Jul 26, 2018, 6:28 PM UTC

asdojasdosadsa wrote: post #20

reaperducer wrote: post #18

If you're taking requests, a similar page for Flexbox would be the bee's knees.

Is there a case you would prefer Flexbox over Grid?

Grid suffers when you deal with things of unknown variable height and unknown number of child items.

I use a mix of flexbox and floats to achieve any desired layout for RWD

Grid only has 87% browser support