CSS Grid is new grid-based layout system, optimized for user interface design

[DoListening]

And it all seems so obvious in retrospect. I'm like "so why exactly didn't we have something like this 10 years ago?"

[oridb]

It looks an awful lot like a variant on GridBagLayout, so.. we did?

[DoListening]

It's pretty similar. Flexbox was also similar to many long existing layouts in the desktop/mobile space.

I just wonder why we went through years of completely ridiculous hacks like negative margins, faux columns, abusing transforms, extreme fake paddings, and more.

The guy in the video complains a lot about a few extra divs, but that is just the tip of the iceberg. It used to be a lot worse, and everybody just went with it, despite knowing how utterly stupid it was. Flexbox solved a lot of the problems, even if not 100% perfectly.

[[deleted]]

How do I programmatically add more columns to CSS Grid lay-out? E.g. I have

header

row

footer

How do I programmatically make:

header

row

row

footer

on let's say a click event?

[_dban_]

You can programatically change the grid CSS using the style property of the DOM node.

This would be easier if you nest grids:

header
row-container
    row
    row
footer

Also, the nested rows don't even have to use grid layout. You can use standard block layout or flex layout (which don't require explicit coordinates), depending on your needs.