This page summarises the various ways that Grids can be rendered using HTML and CSS. We will assess each method on the following criteria:
Each method is covered in detail below.
Children are placed in the normal flow of the page:
Flexible — we can stretch the grid to fill the remaining available horizontal space
Fixed columns — we can constrain columns to a specific width
Flexed columns — we cannot stretch to fill the remaining available horizontal space
Mixed columns — we cannot both fix and stretch columns
TODO: remaining criteria
Children are laid out using the table model:
TODO
Tables as layout:
I1 | I2 |
I3 | I4 |
Flexible — we can stretch the grid to fill the remaining available horizontal space
I1 | I2 | I3 |
Fixed columns — we can constrain columns to a specific width
I1 | I2 | I3 |
Flexed columns — we can stretch to fill the remaining available horizontal space
I1 | I2 | I3 |
Mixed columns — we cannot both fix and stretch columns
I1 | I2 | I3 |
Horizontal alignment — we can control the horizontal alignment of children
B1 |
I1 |
I2 |
I3 |
Vertical alignment — we can control the vertical alignment of children
B1
|
I1 | I2 | I3 |
Column span — we can span children across multiple columns
I1 | I2 |
I3 |
Row span — we can span children across multiple rows
I1 | I2 |
I3 |
Semantic — method does not use semantic markup; it uses tables