
CSS Grid changes everything [video] - mladen5
https://www.youtube.com/watch?v=7kVeCqQCxlk
======
munificent
I giggle a little bit inside when web designers say "We shouldn't use
meaningless tags that exist only for layout. We should use semantic ones, like
<header> and <footer>!". Except that, uh, "header" and "footer" _themselves_
are layout terms. They're just a metaphor for a document as a body ("<body>")
with the head at the top and the feet at the bottom. It's not like the
contents of a <footer> tag have anything to do with feet. We call it
"semantic" simply because the metaphor is old enough that we've internalized
it and no longer see it.

Not that I think this detracts from the talk at all. Fewer, cleaner tags is
good, regardless of how they're spelled.

~~~
vanderZwan
I do not see how the _etymology_ of these words being a layout-metaphor argues
against them having more semantic value now? The way you describe a footer
makes it sound like the last block of text of any article (being at the
bottom) is by definition the footer. Which is of course not the case: it is
used for certain types of content.

Your own book uses <asides> very heavily[0]. They are not just literally aside
the regular flow of the document (actually, about that, see the next
paragraph), the type of content in them is different - it is reserved for
tangential stuff like jokes or deeper information that would interrupt the
pacing of the main narrative.

Aside about asides in your book: I bought the epub version when it came out,
and although it was a symbolic purchase (I had read the whole thing already as
you wrote it), I somewhat regret the format choice due to the sorry state of
epub readers. Not all of them even support the aside tag. The one that does
(the Firefox Epubreader extension) does not keep a margin for the aside but
inlines them. This really disrupts the flow of the text. In traditional book
layouts that use the full margin for the text, these asides would be printed
as a smaller footnote at the bottom of the page. Surely with the right bit of
code one could generate such a layout, based on the semantic meaning of
<aside>. But like I said: epub readers are in a pretty sorry state. Should
have gotten the pdf instead[1].

[0]
[http://gameprogrammingpatterns.com/introduction.html](http://gameprogrammingpatterns.com/introduction.html)

[1]
[http://gameprogrammingpatterns.com/sample.pdf](http://gameprogrammingpatterns.com/sample.pdf)

~~~
munificent
_> The way you describe a footer makes it sound like the last block of text of
any article (being at the bottom) is by definition the footer. Which is of
course not the case: it is used for certain types of content._

That's a fair point. Since, historically, the convention has already been
established that the stuff we put at the bottom of the page in a footer tends
to be stuff about "X", we can now say with some confidence that "footer" has
the semantic "about X".

 _> They are not just literally aside the regular flow of the document
(actually, about that, see the next paragraph), the type of content in them is
different - it is reserved for tangential stuff like jokes or deeper
information that would interrupt the pacing of the main narrative._

Right, they are both. They are physically off to the side because they are
unnecessary for the main line of the narrative. The form and the function are
in harmony (as they should be!).

"Aside" is another funny word because it's also a spatial word. I'm not sure
how it entered use for print. I could see it being simply because the text is
to the side.

But "aside" also means an "an utterance not meant to be heard by someone;
especially : an actor's speech heard by the audience but supposedly not by
other characters". That conjures up a delightful image for me of an actor
literally stepping to the side, leaning towards the audience and muttering a
joke to them. That's the picture I always have in mind with the asides in my
book.

I could see it entering print from that etymology too.

 _> I bought the epub version when it came out, and although it was a symbolic
purchase (I had read the whole thing already as you wrote it), I somewhat
regret the format choice due to the sorry state of epub readers._

I really appreciate you buying a copy! I agree, ePUB is about the worst
format. But it works on eReaders, which is nice. If you aren't limited to one
of those devices, the PDF or web version is probably better. If you'd like me
to send you the PDF version, email me and I'd be happy to hook you up.

------
Someone1234
If you need to support IE 10, 11, or Edge then Grid is broken. Microsoft's
browsers follow an older spec than Chrome/Safari/Firefox. Microsoft are going
to fix Grid in Edge 17, but no release date yet.

Unfortunately this is my life right now. When Chrome and Firefox dropped
support for NPAPI a lot of enterprise customers intentionally moved their
users back to IE 11. The loss of NPAPI has ironically increased IE 11's
market-share, talk about unintended consequences...

I understand why they didn't but part of me wishes Microsoft had enabled NPAPI
in Edge just so we'd at least get modern web standards even if NPAPI is bad
and insecure. Instead IE 11's life is now another five years at minimal or
until the last Java Applet, ActiveX control, or Flash page disappears.

[https://caniuse.com/#feat=css-grid](https://caniuse.com/#feat=css-grid)

~~~
daotoad
I've used grid with IE11. You need to add some extra prefixing noise to your
css. The way you identify grid elements is different and it sucks to duplicate
the layout information.

But it most definitely works.

~~~
cvsh
It doesn't with IE10 though. And there's no way to fall back to flex or
another column system.

Which means, if you need to support IE10, you need a whole parallel set of
styles. There's no graceful degradation when it comes to overall site layout,
unless you're willing to serve the single-column mobile version to older
browsers.

~~~
_betty_
what's wrong with giving older browsers a different experience?

~~~
ataylor32
One scenario I can think of is a non-IE user telling an IE user to go to a
particular website and click the button that's at the top of the right
sidebar. For the IE user, it might be a stacked layout where the sidebar
actually appears under the main content. I would call this a nuisance more so
than a major issue, but nevertheless it is something to consider.

~~~
_betty_
you'd have the same issue between a desktop and mobile user. i don't see it as
an issue at all.

~~~
ataylor32
I think the average computer user knows that websites often look different on
computers vs. phones, so they might be confused when a website looks different
than normal on a computer. Like I said, I would only call this a nuisance.
Certainly not a big deal.

------
Dangeranger
Jen Simmons and Rachel Andrew have done really great work on making CSS Grid
sensible to comprehend. I cannot recommend their resources enough.

\- [http://labs.jensimmons.com/](http://labs.jensimmons.com/)

\- [https://gridbyexample.com/](https://gridbyexample.com/)

~~~
yawgmoth
I personally benefited from
[http://cssgridgarden.com/](http://cssgridgarden.com/)

~~~
codemati
Just went through this - intuitive and helpful. I'll also add
[http://flexboxfroggy.com/](http://flexboxfroggy.com/)

~~~
maddyboo
And I'm sure everyone knows the original (?) inspiration for these cute little
games: [http://cssdiner.com/](http://cssdiner.com/)

------
msoad
I worked with CSS Grids back in 2010 when I was working on a Windows 8 app.
Since then I hated any other constraint resolver including Box Model, iOS Auto
Layout and Flexbox model.

CSS Grid is so intuitive you forget how difficult this problem has been in the
history of UI engineering

~~~
blueside
The intuitiveness of CSS Grid is the major appeal for me.

I've worked with Flexbox for the last few years and still regularly have to
look up the Flexbox reference pages. Perhaps it's just me, but I have found
the whole Flexbox naming scheme anything but intuitive.

~~~
thinkloop
I haven't built a site in the last 5 years without flexbox and not a single
time was I able to interact with it without referring to docs, then still
randomly iterating through property values in the inspector until it looked
right. That's basically my official process. Luckily the problem space is
simple enough for that to be efficient, and only a couple of properties are
needed 90% of the time.

------
ruairidhwm
The Wes Bos course on CSS Grid is free and excellent. Check it out:
[https://cssgrid.io/](https://cssgrid.io/)

~~~
joshfarrant
Was going to say the same thing. It's a great resource for getting to grips
with Grid.

------
gmiller123456
I wonder if I'm alone in the opinion that whatever method is used to create a
complex layout, the method needs to be Turing Complete. I can understand the
appeal of being able to create some tags and not having to worry about what
happens after that, but you really only end up with a good design if you're
just trying to do something simple. We often see people so devoted to the idea
of CSS they end up with something incredibly complicated that could have been
done in just a handful of lines of code.

edit: Fixed spelling of "Touring"

~~~
eyesee
I disagree. It is possible to generate a wide variety of layouts using this
and other purely declarative approaches. If producing a layout requires the
use of "Turing-complete" semantics, then JavaScript is available for the
purpose. I would argue if your layout becomes that complex you might consider
simplifying.

There is a long-standing trend of adding scripting into declarative
environments to allow greater capability. More often than not this becomes yet
another avenue for exploitation by bad actors. As an industry we should learn
from our mistakes and resist the use of executable code into static documents.

~~~
gmiller123456
I'd agree with you if web pages were "static documents", but they aren't and
never were. They've always had to adjust to different screen sizes, and
quickly became interactive applications, and now have to adjust to radically
different pixel densities.

~~~
The5thElephant
And all of that works just fine with CSS. CSS has problems, but more to do
with scoping or lack of a grid-based layout system (until now).

When I see devs saying "Just do it all in Javascript" I have to assume they
aren't actually that familiar with CSS. First off Javascript simply
manipulates CSS properties anyway when it comes to styling, and writing a
system that completely ignores CSS and renders its own way is far more complex
without any clear benefit.

~~~
gmiller123456
I think you misunderstood my response, in what you were replying to I was just
pointing out web pages are not static documents. I in no way intend to suggest
that JavaScript can solve all of the problems with CSS, and also don't agree
that the grid system will help much. IMHO the biggest thing missing from the
CSS/HTML/JavaScript system is the ability to determine how much space is
required to display certain text or elements, vs how much space is available
to display them, and the ability to make decisions based on that (recursively)
on how other elements are displayed.

------
pg_bot
As someone who recently converted to using CSS grid for my company, I can't
imagine going back. It really reduces the mental overhead when building
complex layouts and has made my code shorter and easier to understand.

~~~
ravenstine
Who is the target audience of your company? The reason I ask is that I highly
doubt I could use CSS grid at my company(news outlet) without breaking the
site for many of the users.

~~~
kybradeck
The video mentions that CSS Grids are used in the production site for the
NYTimes. See [https://open.nytimes.com/bootstrap-to-css-
grid-87b3f5f830e4](https://open.nytimes.com/bootstrap-to-css-
grid-87b3f5f830e4).

------
JepZ
It's funny, as six month ago I wasn't very fond of the whole "Grid is ready
today" talk with ~65% of browsers supporting it. But actually I am glad that
within 6 month that percentage seems to have risen by another 10% so that we
have ~75% today: [https://caniuse.com/#feat=css-
grid](https://caniuse.com/#feat=css-grid)

And when you take a closer look to the numbers you can see that in another 6
to 12 month the technology should be practically out there in every browser,
as the few who will still not have it, will be some mobile browsers which will
use the mobile first baseline variant anyway, if you follow the
recommendations from the video.

Pretty cool stuff.

------
Animats
Tables. They're back!

~~~
jordanlev
Wrong. Tables impart meaning to user agents (browsers, screen readers, google
bots, etc) and as a side effect they have a default visual style that is
useful for some layouts in some limited situations (but without any kind of
fine-grained detail that most modern designs call for -- ESPECIALLY when
making responsive designs that work across different screen widths). CSS Grid,
on the other hand, is a tool specifically for complex visual layouts which
imparts no semantics on the content (so it is proper to use for non-tabular
content).

~~~
Animats
Yeah, yeah, I know the hype. It's just another grid-based layout system.

Now if it was a full constraint system, that would be more impressive.

~~~
dredmorbius
Such as?

~~~
Animats
For a good example, see sketch mode in Autodesk Inventor. Not just boxes -
curves.

~~~
dredmorbius
Thanks.

~~~
Animats
It's worth trying Inventor (or Autodesk Fusion 360, which is basically a
cloud-based Inventor with a free demo) to see a constraint system with a good
GUI. Draw lines and make boxes, and if you end a line at an edge, the line
endpoint is constrained to that edge. End a line at the endpoint of another
line, and those points are constrained to be at the same place. If a line is
drawn vertically or horizontally, it's constrained to stay vertically or
horizontal. Drag a point or line, and everything else is adjusted, but as
little as possible, to maintain the constraints.

Specify that two lines must be parallel, or perpendicular, or the same length,
and those become constraints. Specify a dimension between two lines or points,
and they stay that distance apart. A dimension can have an expression based on
other dimensions, so if you need something to be twice the distance of
something else, you can do that.

This goes beyond straight lines. You can have a circle or arc constrained to
touch a line or another circle or arc. A curve can be constrained to be
tangent to something else, for a smooth transition. Designers would love that.

The GUI won't let you add a constraint that conflicts with another
constraints. There's no "constraint priority". All constraints are equal.

The GUI has a counter which shows how many degrees of freedom still need to be
constrained. Little red arrows show you what can still move. When everything
is constrained and nothing can move, the counter changes to "fully
constrained", and the sketch is now rigid. But you don't have to go all the
way to fully constrained if you don't want to. The system will do something
reasonable if you don't.

Some sketch dimensions may be driven from another sketch. In the web world,
this would correspond to adjusting to window size.

The CAD people deal with hard geometry problems, much harder than the ones web
layouts face, and they have much better technology for doing it. It's even
user-friendly.

~~~
detritus
You make some interesting points. My first thought is "how on earth would that
be somewhat easy to describe in markup?"

for sure a GUI editor would be a beautiful thing to behold though!

~~~
Animats
It was very hard for the CAD and animation industries to figure out a good UI
for editing geometry. It took about two decades. But it's now a solved
problem. The web layout industry should look at that technology, which comes
from an industry that has to deal with hard geometry problems.

~~~
dredmorbius
One of the advantages of architectural design is that few building footprints
vary greatly from instance to instance, or for the _same_ instance,
particularly over the course of a fraction of a second or so.

Or ... when that's happening, much more exciting things are going on.

I'm wondering just how complicated text really needs to be, and what the
benefits of walking well outside gridded layout is.

A text is essentially a linear strand, wrapped. Some of those strands may
present as sub-texts (tables, lists, call-outs, etc.), but you still have the
concept of "how do I present a sequence of letters, arranged by words,
sentences, paragraphs, etc., into some folded space?"

We've gone from tablets, rock walls, scrolls, etc., to generally codices
(printed) or ... well, sort of a scroll-page hybrid for Web.

That said, interesting points, and I plan on digging into this a bit further.

------
bajsejohannes
Any idea why the grid is 1-indexed instead of 0-indexed?

~~~
kybradeck
I believe it's so that you can use -1 to refer to the last gridline. If it was
0-indexed there would be no way to target that final gridline, or there would
be a one-off error when using negative numbers.

Example: [https://css-tricks.com/things-ive-learned-css-grid-
layout/#a...](https://css-tricks.com/things-ive-learned-css-grid-
layout/#article-header-id-2)

~~~
Bromskloss
Couldn't you still use -1 to refer to the last grid line (or was it grid
element)? Python does it, for example.

~~~
kybradeck
Yes, but that would mean the first gridline == 0 and the last gridline == -1,
instead of the way the spec is written today, where the first gridline == 1
and the last gridline == -1. For me, consistency wins here.

------
cryptos
It looks like Bootstrap could be reduced to a pure UI component framework now.

------
wes-k
Have yet to dive in to CSS Grids and this really made it clear what pain it is
solving. I'm super excited to start using this!

Also kudos to the speaker, Morten Rand-Hendriksen, that was a very enjoyable
presentation!

------
TACIXAT
The first part of this video totally highlighted all the frustrations I've had
with CSS. Super excited to try this on my project.

------
ronnier
Is there a good pollyfill for older browsers?

~~~
gkilmain
The speaker suggests serving up mobile layout for older browsers and this is
the pattern we are following at my company.

~~~
ausjke
what does 'serving up mobile layout' exactly mean? Thanks.

yes grid is awesome but how to deal with polyfill is the question

~~~
kinos
I assume design something akin to just all your elements in a straight line
downwards.

------
esfandia
Reminds me of GridBagLayout in Java Swing. Can anyone here who has experience
with both confirm this?

~~~
pvg
GridBagLayout is an AWT, not Swing thing. The most obvious difference seems to
be that people actually like CSS Grid.

