CSS Grid experiment

One grid, several reading speeds.

This page shows how a shared column system can organize an introduction, a small chart, comparable measures, and explanatory notes without making every block the same size.

Illustrative sample content

Service access by distance

Sample values demonstrate how a simple comparison can occupy the wider reading region. They are illustrative, not observed data.

Near transit

78%

Outer districts

56%

Remote areas

34%

Why this works

Placement stays in the stylesheet.

The content remains in a logical document order. CSS changes only how much horizontal emphasis each region receives.

.feature {
  grid-column: 1 / span 7;
}

.placement {
  grid-column: 8 / -1;
}

Sample size

1,240 illustrative responses

Overall access

68% illustrative average

Largest gap

44 illustrative percentage points

Responsive behavior

The reading order remains predictable

Visual placement never replaces semantic order. If Grid is unsupported, styles fail, or the viewport narrows, the introduction still precedes the example, and the example still precedes its measures and notes.