
CSS Grid: No Nonsense Layouts - mjhea0
https://testdriven.io/blog/css-grid/
======
Theodores
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.

------
DecayingOrganic
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.

------
alferguson
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.

~~~
Theodores
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
> 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.

~~~
Veen
Yes, but it's an outdated version of grid that doesn't work with the modern
syntax. You can use autoprefixer to somewhat work around the differences.

[https://medium.com/@elad/supporting-css-grid-in-internet-
exp...](https://medium.com/@elad/supporting-css-grid-in-internet-
explorer-b38669e75d66)

~~~
detritus
Thanks for this, though one thing from that article:

> CSS grid is fully supported in all main browsers: Chrome, Firefox, Safari,
> Edge including their mobile versions.

This isn't strictly true. On my last "Can I get away with deploying CSS Grid
on my site yet?" check, IE wasn't even a of real concern. What was was the not
insignificant number of mobile and old version of Chrome/Safari/etc browsers
that don't support it.

~~~
Theodores
Safari on 32 bit iPads. I don't care about them for what I am doing.

Can you tell me of any other hold ups? I am not familiar with Apple phones or
Android phones stuck on legacy browsers. Is there anything I need to know?

I am okay with not supporting IE.

~~~
detritus
Then go for it!

I think my number, across unsupported browsers, was around 10% or something.
Not a huge number, but that's 10% potential lost clients.

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

