CSS Grid Layout
- Started
- Last post
- 10 Responses
- dbloc
Just came across this. Not fully supported by all browsers yet, but it's definitely going to be the standard soon.
- section_0140
This looks pretty good. I got used to flex-box, but it still feels "not quite there" under certain circumstances. This feels closer to how is should work in most people's minds, imo.
- agreed. I can't wait to start implementing it. I think it's a bit too early though.dbloc
- monNom2
It's not too early! https://caniuse.com/#search=grid…
It's actually supported in all major browsers now that Edge 16 is out. (in IE11, you need to use a -ms prefix, and their syntax is a bit different, but doable)
I'm pretty excited about it personally, and I actually just won a contest for using it *humble brag*. You can check out my entry here: http://www.hi.agency/deck
There's a ton of open-source examples and entries here for ideas:
https://www.smashingmagazine.com…Try it out, it's cool!
- It works in the most recent browsers, but there are too many people out there that don't keep their browsers up to date. Still partial support in IE.dbloc
- chrome/firefox/edge all auto-update I think. Though you are right that you need to consider the laggards. It's super easy to have a fallback. Just use @supportsmonNom
- Bootstrap 4 uses grid with flexbox fallback. Works in near everything.ETM
- And very nice work monNom!ETM
- yeah dude, nice work. I like the menudbloc
- Sweet, indeed.Maaku
- dbloc4
Free CSS Grid tutorials released today.
https://cssgrid.io/- tnx for sharingKrassy
- Ahh, was just about to share Wes' course too.ETM
- Incrediblei_was
- is css grid safe to use already? Browser compatibility and all...Calderone2000
- https://caniuse.com/…dbloc
- monNom1
This interactive grid 'game' is a nice way to get a handle on things too.
- evilpeacock1
CSS Grid Layout is production ready if you use fallbacks. It opens up the last "holy grail" layout restriction web designers have had. I wish it was a thing before the decline of the open web started.
Here's a new video series on it from one of the architects Jen Simmons:
- lol @ the thumbnaildbloc
- lol @ dbloc!ArmandoEstrada
- lol @ her personalityutopian
- detritus1
Further to the above vid...
- Decided I'm going to re-do my site in CSSGrid, so will share any useful titbits I come across.detritus
- Its useable in IE11 - the biggest issue is the lack of 'auto-layout' all items must be explicitly placed... Checkout FF Developer edition, great grid dev tools.estetic
- i only code for fridge browsersprophetone
- detritus0
Rachel Andrew is effing great at this.
eg. tutorial:
Her YT channel:
https://www.youtube.com/channel/…A CSS Grid example site by her:
https://gridbyexample.com/
- Milan0
flex-box is for one-dimensional layouts, grid is for grid layouts
- _niko0
i'm seeing this now #ffffff50 the 50 being the opacity, when did this replace rgba for alpha?
- not grid related_niko
- hmm, didn't know about this. of course IE/Edge don't support it...
https://caniuse.com/…Milan
- prophetone0
huh interesting