CSS Grid Layouts: Using CSS table display

In the current limbo of grid-design possibilities for web design, what solutions should we pursue? I would suggest using the properties of CSS display: table, for the following reasons:

1. Independent of JavaScript.

When I talk about display: table, I am referring to the family of table properties that display can be set to. These include: display: table; display: table-cell; display: table-row; display: table-caption; display: table-column, and several others. Complete coverage of all of these values would be exhaustive; for the purposes of illustration, I will stick to the most commonly-used variations.

There are a few general rules to keep in mind:

• Elements defined as display: table-cell will appear on the same (implied) row, arranged horizontally. Each implied cell will be the same height (determined by the “cell” with the greatest amount of content).

• Elements defined as display: table-row will display on new lines.

• Elements defined as display: table-caption will appear at the top of an implied table, by default.

• Elements with differing display qualities can be nested inside each other, just as real tables can be nested inside table cells.