CSS Grid: No Nonsense Layouts

by mjhea0 • 7 years ago

58 12 7 years ago

alferguson• 7 years ago

Great article, the examples really demonstrate the power of grids. I wish I could use CSS Grid at work but my work requires ie11. Does anyone know of a way to use CSS grid with ie11? I understand some features are supported but its very bare and not reliable.

Theodores3• 7 years ago

The way to handle IE 11 is to degrade gracefully.

IE11 is not a HTML5 browser, it is supported for legacy applications and Microsoft want people to use Edge.

Hence IE11 is never going to get grid. Ever.

So degraded means that you develop in your normal webkit/Firefox way and just change 'display: grid' to 'display: block' when you have it looking good in your dev browser. Then you look at how bad it is.

IE 11 does not need responsive so you just have to get it to be merely presentable and usable, not pixel perfect.

Lea Verou has some useful ideas on how to do this, check out any of her recent talks online to get an idea.

nicoburns• 7 years ago

Hence IE11 is never going to get grid.

IE11 actually has grid. As does IE10. Admittedly an older version. But it's a bit mean to call IE out on lack of standards support when they actually introduced grid in the first place.

manishsharan• 7 years ago

My strategy is to check if CSS Grid is available using Javascript ; if not , then use flexbox . The layout might look off but the page is still usable. And you dont have to redo your page when the IE11 finally does go away.

Zardoz84• 7 years ago

autoprefixer helps a lot. A few days ago, I just used css grid to layout a few elements and it's working on ie10/11

Theodores3• 7 years ago

The measurement units need the viewer units and auto added. I also think 'em' is useful in the grid context.

I am not sure on how best the different ways of defining a grid should best be told to a learning audience, which is everyone except Rachel Andrews. There are quite a few choices and sometimes too much choice is overwhelming.

I think that normal grid template columns with explicit rows is a good way to start. Then all of the other variants need to be tied in to use cases after one gets stuck.

One way this could be done is with a tutorial on CSS grid that uses CSS grid rather than older layout methods. Solving common problems in responsive design or implementing a footer that sticks to the bottom of the page could all be done in the context of the tutorial.

For instance, grid layout could be used for the pros/cons of the different measurement units, so rather than placeholder copy in codepens the examples could be practically 'recursive'.

Examples only get you so far and tend to drop you off in the deep end, if a page was a fully worked example then it could be a really useful reference for when things get tricky.

A lot of the audience for CSS grid already have stuff done with a framework, e.g. the Bootstrap used here, so a worked example could be doubly useful. Some of the extra markup on Bootstrap doesn't help with CSS Grid and there are little workarounds like 'display: contents' to surface the contents of a container block to a grid.

neals• 7 years ago

Lost me at grid lines. Maybe add some overlay actual lines to clearify?

DecayingOrganic• 7 years ago

One of the main challenges I encounter while using CSS Grid is of the nature of responsive design. I do not know if this problem is due to an immature understanding of CSS Grid, or more of a general setback for all parties involved.

As you try to adapt your website to smaller and smaller screens, font sizes become a problem, regardless of the units you put in use.

The reason why is that as the grid items' dimensions change, text that it occupies overflow, or for that matter, leaves a noticeable space which has to be repaired.

In the light of that, I resort to certain techniques such as to increase the font size when the text of the grid item fails to occupy semi-subjective required space for it to be not considered 'awkward', as the unused space is pushing down the next content even further than one would prefer.

This concludes with an unnatural amount of media queries, created, at certain breakpoints, especially for font sizes.

I am open to any feedback on this.

CSS Grid: No Nonsense Layouts

Related Stories