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:
- 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-cellwill 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-rowwill display on new lines.Elements defined as
display: table-captionwill appear at the top of an implied table, by default.Elements with differing
displayqualities can be nested inside each other, just as real tables can be nested inside table cells.