Grid Rendering

This page summarises the various ways that Grids can be rendered using HTML and CSS. We will assess each method on the following criteria:

  1. Flexible — can we stretch the grid to fill the remaining available horizontal space?
  2. Fixed columns — can we constrain columns to a specific width?
  3. Flexed columns — can we stretch to fill the remaining available horizontal space?
  4. Mixed columns — can we both fix and stretch columns?
  5. Horizontal alignment — can we control the horizontal alignment of children?
  6. Vertical alignment — can we control the vertical alignment of children?
  7. Column span — can we span children across multiple columns?
  8. Row span — can we span children across multiple rows?
  9. Semantic — does the method use semantic markup?
  10. IE6 — does this method work in IE6?

Each method is covered in detail below.

Method #1: Flow

Children are placed in the normal flow of the page:

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 cannot stretch to fill the remaining available horizontal space

I1 I2 I3

Mixed columns — we cannot both fix and stretch columns

I1 I2 I3

TODO: remaining criteria

Method #2: Table Model

Children are laid out using the table model:

TODO

Method #3: Table

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