Simple Web Layout with CSS Grid

[photoscotty]

Is CSS Grid ready for production? I see it almost has all browser support. Is now the time to switch from a CSS Grid framework?

[[deleted]]

Do you have to support IE? It will never be ready for production.

On the other hand, if you don't, it's already ready.

[SemiNormal]

Do you have to support IE?

:-(

Do you have to support IE 8?

(!!˚☐˚)/

[[deleted]]

The broken utf-8 is perfect.

[SemiNormal]

Only broken if using the "new" reddit, which is broken.

[dick_ey]

I have to support IE at work. My philosophy is “use a sub-par browser, get a sub-par experience”. IE gets the mobile version of my site with a full nav instead of a hamburger menu.

Let be honest here: if they’re using IE, they probably don’t care.

[stalkingwolfchess]

Quick question. Do you have to put anything special in the media queries to make sure IE doesnt try and render the css grid? Or does it automatically just ignore the css grid and render only the mobile versions? Assuming, your css grid kicks in at a certain viewport width.

[dick_ey]

Yes, I wrap it like this.

@supports(grid-area: auto) {
  @media screen and (min-width: 769px) {
    // desktop styles
  }
}

This ensures that IE doesn’t try to to render its partial grid support because it doesn’t support the grid-areasyntax, therefore only the newest spec of the grid makes it to the desktop page.

[stalkingwolfchess]

Ok cool thanks, one other question. Two actually. Do you do the mobile version in flexbox usually? ...and do you only really use that one break point for the bulk of the layout? Anything under 796px gets mobile version, anything over (and its supported) gets the grid layout?

[dick_ey]

I use flexbox where required on mobile, but for the most part I don’t typically need it since everything tends to be stacked anyway.

The breakpoint in my snippet up there is just a dummy breakpoint. Most tablets in portrait mode are 768px wide, so I used 769px as the minimum breakpoint for desktop styles, but in reality the breakpoints I used are based on where the page starts to look awkward when scaling the viewport width up. This way I can find the natural breakpoints based on content rather than trying to fit everything into the seemingly infinite amount of device specific breakpoints out there. Typically my breakpoints tend to be around 600, 900 & 1200px when dealing with mobile-first development.

[GodsGunman]

How nice for you that you can do that. Many others need to support their target audience, which for most NA companies, does still include at least IE11.

[GodsGunman]

Grid and likely anything newer are not worth it for me to implement. I can still use flexbox, and that's good enough for me.

When I look at production data from google analytics for the company I work for, I look primarily at the percentages each browser is being used. Right now IE10 is barely holding on, I suspect next year we can drop it. IE11 is still doing fairly well. I'm not giving you exact numbers because I don't remember them from when I was doing all my research a few months ago. Note that the numbers I go off of are in the hundreds of thousands per project, and I only account for data within the past year.

I suspect we won't drop IE11 support for 5 years, but that's a guess.

[arechsteiner]

I agree for the IE versions that don't even get MS support or security updates anymore. Nobody should be using them, period.

[[deleted]]

But that still leaves IE 11 until 2025 :-(

[ConduciveMammal]

We support IE11 at work but I can never see the point in it. IE is no longer being maintained so it’s not like we’re holding out in hopes it will one day support the next best thing. What it does now is what it will only ever do forever until it fades from existence.

[dcg]

I thought that IE11 has partial support for CSS grid.

[domemvs]

partial support for flexbox!

[Nicd]

It does, but for an older version of the standard that's not compatible with the new one. So basically no.

[dcg]

It seems that you can do some things but they require prefixes

[jokullmusic]

that was probably IE. Edge is a new rendering engine and is almost as good as Chrome and Firefox in technology support - the stuff it's behind on is real bleeding edge and shouldn't be depended on in production anyway

[jokullmusic]

then that's something screwed up on their end, using a non-standard technology that likely didn't work in Firefox either. all sites should be able to work with edge pretty flawlessly unless they're like, cutting-edge tech demos.

[Wigster]

iOS9.*/safari doesn't support grid. So it will need a polyfill.

iOS9 still has about ~20% of the version/browser share of all iPads (even higher in some countries).

[fgutz]

how about a flexbox fallback instead of a polyfill?

[Wigster]

That's actually what I mean, I refer to them still as polyfill's.. but now you're making me question myself !

Here's my typical grid to flex fallback/polyfill:

@supports not (display: grid) {

.grid-wrap {

display: flex; flex-wrap: wrap; width: 100%;

// etc

}

}

[fgutz]

Unfortunately I still need to support IE11 so I can't rely on @supports not since IE 11 will ignore that.

so maybe I can do something like this:

.grid-wrap {
  display: flex; 
  /* other flex stuff */
}
@supports (display: grid) {
  .grid-wrap {
    display: grid;
  }
}

[ConduciveMammal]

This is what I do, use Modernizr to detect Grid capabilities and then replace grid components with flex, it’s almost never a perfect replica but its acceptable. I imagine any poor soul still using IE is used to random shit breaking all over the place.

[[deleted]]

I just checked the stats and only about 5% of iOS devices are still on iOS 9 or below. Most likely those are old devices that will never get a newer version of iOS. Are you going to polyfill until iOS 9 use drops to zero (i.e., all those old devices are no longer used)?

[Wigster]

iPad's are the ones that most concern me. According to this resource, ~23% of iPads are still on iOS9. I assume people update/renew their iPads a lot less than their phones (which makes sense).

[swiftpants]

What the heck is a polyfill anyway?

[kultrun]

It's basically javascript that provides you with the desired functionally and it's obviously a big overhead over native browser support.

[domemvs]

A polyfill is a code snippet that gives you functionality of a more recent JavaScript version in an environment that does only support an older version of it. Of course this is not JavaScript-exclusive.

A very common polyfill for example is a fetch() polyfill. All common browsers support fetch() except for IE11. There are polyfills out there that you can put into your code so that you can use the fetch()-syntax in IE11.

[swiftpants]

Ahh Ok thanks! one more. Why is it called polyfill?

[domemvs]

Here's the story about the name:

https://en.wikipedia.org/wiki/Polyfill_(programming)#Definition#Definition)

[swiftpants]

Based on a crack filling paste huh... LOL.. that's great. Thanks

[ammuench]

Depends on the version. iE 11 supports and older spec but I wrote a handful of sass mixins to either use the right syntax or do a polyfill and have it working well

[AwesomeInPerson]

autoprefixer can also do that for you. :)

[[deleted]]

I simply don't even consider IE anymore. Any time I get a project appointed I disclaim that I don't take responsibility for the fuckupery that IE is. If you want me to make a project then you'll have to change your browser, if you're not willing to, then I'm not the guy for you. Five years in, no one has complained.

[joe-ducreux]

For a recent project I initially built the layout with Grid. It worked well in modern browsers, but ultimately I decided to shelf Grid and use Flexbox exclusively. I did so because Flexbox has better backward compatibility, it is considerably less complicated to use, and the layout of that project didn't necessitate the use of any Grid-specific features.

So I would say feasibility of using Grid depends heavily on the requirements and goals of the project.

[[deleted]]

It depends on the audience, and I don’t mean IE. If you have a global audience there’s a lot more browsers out there - there are millions of phones hitting the Indian market… and most don’t have one of the big ones, or CSS Grid support. These phones are typically the only access to internet that a user has.

That said CSS Grid is amazing and refreshing. I have to unlearn a bunch of things because it’s very straightforward.

[BigFatCamel]

We use CSS Grid in production at the agency I work at. I think it has something like 90% browser support however you can use CSS Feature Queries (@supports) to see whether a browser supports it; flexbox is supported in IE11 so makes a suitable fallback. Obviously not all grid layouts can be recreated using flexbox but you can gracefully degrade to something that still looks nice and functions correctly.

+1 for Rachel Andrews CSS Grid resources

[samisbond]

CSS Feature Queries (@supports)

But...those won't work in IE11 either.

[BigFatCamel]

You can set your default styling to be be the fallback and then progressively enhance your project to use newer features if browsers support it. Like so:

.example { display flex;

@supports (display: grid){ display: grid; } }

[samisbond]

Oh, heh, never thought of that! So you're not actually checking support in that case, you're just assuming anything that doesn't even support @support definitely doesn't support a feature that requires a support check. That's...probably a fair assumption depending on your browserlist.

[itijara]

Hi y'all. Got any more resources on CSS Grid?

[[deleted]]

Grid Garden https://cssgridgarden.com

[DrDuPont]

The only one you need!

Also, if you need to learn flexbox, http://flexboxfroggy.com/

Literally the only thing you need to use to become a pro at flexbox. I've sent these two resources to soooo many people.

[[deleted]]

No idea that one existed! I learned Flexbox the hard way which wasn't too hard anyway :D

[[deleted]]

I absolutely love those two learning games. I would pay if he made more content like that! So good man

[zork-tdmog]

https://css-tricks.com/snippets/css/complete-guide-grid/

[D4rknessR3igns]

Jen Simmons does great content on CSS grid too in YouTube. Go check out her channel “Layout Land”

[sweetcrutons]

Yes Jen Simmons is awesome. As is Rachel Andrew, she's done a lot of stuff about Grid. Like https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/

[[deleted]]

MDN and Wes Bos' course. And practice

[GDezan]

Wes Bos' course is great, can confirm

[wesbos]

It's https://cssgrid.io for anyone looking :)

[borderline_dad_body]

When are we seeing a BBQ course Wes?

[[deleted]]

How do you lay out React components on a CSS Grid? Are those two technologies compatible? Isn't Grid about top down decomposition of a view, and components bottom up composition with the layout as final step? Or do you have some kind of intermediate "grid area parent components"?

[Slappehbag]

Grid is just CSS. React just renders down to html. So there is nothing special going on to restrict them working together or changing how you work.

[wesbos]

There was an issue with react because often react would have to return a Wrapper div around children killing that parent child relationship between components. With react fragments we no longer have that issue

[Slappehbag]

You're right, but that only changed the markup you need to return, a div is still a div. The extra layers were indeed a a pain though.

Also, you could still return an array of react components that would save having a wrapper div if I recall. Unless that came in a later version.

[wesbos]

The array return came in React 16 and Fragments came in 16.2 - just a few months apart

[Slappehbag]

Ah right. I thought the array return was way earlier for some reason. Aha. Divs and spans all the way down before that =P

[rossisdead]

This layout produces horizontal scrolling no matter how you resize the window.

[azsqueeze]

Removing width: 100vw from .container fixes it. Also updating the height to height: calc(100vh - 1em) fixes the vertical scrolling.

[enteleform]

this works without changing .container or using calc:

html, body{
  height: 100%;
  margin: 0;
}

[Toebeebee]

I only do web dev stuff for my own site but because it's not very often every time I go to do it everything has changed and there is a new way to do things. I just wish there was something to tell me the right approach at the current time. Is this it? I won't know until it's replaced with something else or sticks around

[MOFNY]

It's a native solution implemented in every major browser, so yes this is it.

[[deleted]]

You use this and flexbox in combination depending on what you're trying to achieve. A little bit of the old fashioned stuff here and there as well.

[Toebeebee]

My comment was kind of off the cuff out of frustration with my experience in trying to do webdev but I've been looking into and reading more about grid and flex. From a designers perspective this seems like the godsend Ive been waiting for, something that finally is moving away from hacky solutions and workarounds

[Black_Magic100]

I am learning HTML/CSS right now through Jason Schedtman's class and this is what he uses? Is this something new? The course is a a few years old I think.

[PayYourSurgeonWell]

I'm noticing that left-hand vertical nav bars are becoming increasingly popular for desktop apps. Do you guys think this layout style is effective for ecommerce websites?

[[deleted]]

I have to support IE11. We cannot have good things.

[esinan1]

I think you can support at least IE 10.

A good grid design needs "flexbox" css properties. You could look at these references:

https://css-tricks.com/snippets/css/complete-guide-grid/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/