CSS Grid for Table-Like Layouts

Technical Deep Dive & Specifications

The Non-Table ARIA Semantic Contract

When building tabular layouts using <div> or <section> tags styled with CSS Grid, the browser's accessibility tree sees only generic layout containers (generic or group roles). To make this data accessible to screen readers, we must restore the full tabular hierarchy using WAI-ARIA 1.2 roles:

HTML/ARIA Tabular Tree Architecture:
<div role="table" aria-label="SaaS Pricing Matrix">
  |
  +-- <div role="rowgroup" class="grid-header">
  |     |
  |     +-- <div role="row">
  |           +-- <div role="columnheader">Plan Feature</div>
  |           +-- <div role="columnheader">Starter</div>
  |           +-- <div role="columnheader">Pro</div>
  |           +-- <div role="columnheader">Enterprise</div>
  |
  +-- <div role="rowgroup" class="grid-body">
        |
        +-- <div role="row">
              +-- <div role="rowheader">API Bandwidth</div>
              +-- <div role="cell">10 GB/mo</div>
              +-- <div role="cell">1 TB/mo</div>
              +-- <div role="cell">Unlimited</div>

The ARIA Tabular Role Matrix

The CSS Subgrid Revolution (grid-template-columns: subgrid)

Historically, if you wrapped each table row in a <div> inside a parent CSS Grid, the cells inside each row could not align with cells in other rows because each row created its own isolated formatting context.

CSS Subgrid (CSS Grid Level 2) solves this cleanly:

/* Parent Container defines the Master Grid Tracks */
.grid-table {
  display: grid;
  grid-template-columns: 200px repeat(3, minmax(140px, 1fr));
  gap: 8px 16px;
}

/* Header and Row Containers inherit parent columns */
.grid-row {
  display: grid;
  grid-column: 1 / -1; /* Span across all parent tracks */
  grid-template-columns: subgrid; /* Inherit the exact parent column coordinates */
  align-items: center;
}

Parent Grid Tracks: | Track 1 (200px) | Track 2 (1fr) | Track 3 (1fr) | Track 4 (1fr) |
                    |                 |               |               |               |
Row 1 (subgrid):    | [Feature Name ] | [ Starter   ] | [ Pro       ] | [ Enterprise] |
Row 2 (subgrid):    | [Storage Cap  ] | [ 50 GB     ] | [ 500 GB    ] | [ 10 TB     ] |
Row 3 (subgrid):    | [Support SLA  ] | [ Community ] | [ 24h Email ] | [ 1h Phone  ] |

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 28–36: .grid-table establishes the master grid coordinate system: grid-template-columns: 220px repeat(3, minmax(140px, 1fr));.
• Lines 39–44: .grid-row spans from column track 1 to -1 (grid-column: 1 / -1) and activates grid-template-columns: subgrid;. This forces every cell inside every row to lock cleanly into the parent grid's coordinate columns.
• Lines 73–115: Media query @media (max-width: 700px) drops the grid coordinate model, switching .grid-table to display: flex; flex-direction: column; and transforming each row into a distinct standalone card.
• Lines 125–158: Complete ARIA attribute architecture (role="table", role="rowgroup", role="row", role="columnheader", role="rowheader", role="cell") ensures screen reader users experience a native 2D spreadsheet.

Expected Browser Render Output

• Desktop ($> 700\text{px}$): A 4-column matrix where all cell widths across every row are aligned via CSS Subgrid.
• Mobile ($\le 700\text{px}$): The matrix reflows into 3 feature cards (Compute Instances, NVMe Storage, SLA Guarantee), each displaying the tier breakdown with uppercase labels.