What Grid Can Do That Tables Can’t
There’s a kind of narrative out there that’s basically, “Silly CSS wonks: first they tell us tables are bad, now they give us grid.” Nevermind that this is completely ignorant of the original argument against tables for layout (tables were never bad for layout because of the way they looked on screen; they were bad because of what they did to your markup).
It’s true that grid looks a lot like tables at first glance. But it’s also worth noting the features grid provides that cannot be accomplished using tables. Here are just a few:
- Overlapping cells
- Empty cells, without a bunch of empty tags
- Size columns (or rows!) in proportion to one another
- Complex alignment of contents within a cell
- Specify a flexible range of acceptable sizes for columns & rows
- Provide a full definition of responsive behavior, often without any media queries