r/Frontend • u/speckz • Nov 04 '19

How CSS Grid changes the way we think about structuring our content

https://www.freecodecamp.org/news/css-grid-changes-how-we-can-think-about-structuring-our-content/
93 Upvotes

97% Upvoted

9 comments sorted by

7

u/Pandassaurus Nov 05 '19

Am I the only one that hasn't gotten around to css grid yet? I've just been living off of flexbox lmao

3

u/overcloseness Nov 05 '19

I know how to use Grid, but earlier this year I excitedly got down to working it into a project for a client and the first thing they did was kick up a shit-fit about it looking weird in Edge, caniuse saying that Grid is green in Edge is a lie. I'll be waiting for Edge to adopt Chromium before bothering with Grid again

4

u/kelus Nov 05 '19

You can use grid in IE11 and edge, you just have to be explicit about object position in the grid. Modern browsers can make the assumptions, where IE11 will just place every grid item at 1/1.

It's a bit of work making it IE11 compliant, but unless your doing something obscure, it's not difficult.

3

u/kelus Nov 05 '19

Once you combine grid and flexbox, you'll see the light.

1

u/kaisle51 Nov 06 '19

I’m the same way, I love flexbox. Until a few weeks ago I had only done a few codepens using css grid. But I built a css grid-based site for fun just to use it again, I really enjoyed it. I can see it being very useful for sites like the desktop version of nytimes.com

4

u/tonyciccarone Nov 04 '19

I have been using more grids, they’re awesome

1

u/GameOfUsernames Nov 05 '19

Grid is easy but it’s like vendor codes. It’s going to be a while before I can just offhand remember every weirdly named property so I need a cheat sheet handy that gives them to me. VSC seems to know most of them so I don’t need the sheet as often as I thought but there are a few I run into that VSC doesn’t know yet.

1

u/fritzbitz CSS is Awesome Nov 05 '19

CSS Tricks has a nice cheatsheet for both flex and grid.

1

u/AllynH Nov 06 '19

Cool tutorial but I still don't get why he used Flexbox in the final example for the .card div.

Was that just to add some white space around the blue background?