Be Careful Using ‘Grid’

TL;DR: Be careful when using the word grid on its own. Be certain you have chosen the term that accurately describes the pattern you want.

Line-art illustration of IKEA Kallax shelving, made up of a five by five grid of open cubes, lying on its back and partially assembled with disembodied IKEA hands showing where to attach the sides.

If this post looks familiar to you, that is because it is essentially a redress of my 2023 post Be Careful Using ‘Menu’. It is not as divergent as my 2021 post Stop Using ‘Pop-up’ nor my 2020 post Stop Using ‘Drop-down’. The word grid can appropriately mean many things in web tech, so this post is not titled as strongly as those two posts.

As you embark on a design, build, or specification, it is important that you, the stakeholders, and the team understand what you are producing and why. When you say grid, which one of the following concepts do you mean? What about your client? Your designer? Your developer? The user (who calls the help line)? The screen reader? The voice control software?

This post is not for end users. Using these terms with this detail will likely be meaningless to them, especially when visual designs and novel implementations conflate multiple patterns.

1. CSS Grid

The W3C CSS grid specification offers a layout paradigm that lets authors place content in two-dimensions, along with adapting to viewport size and (to some extent) the content itself.

While primarily concerned with visual layout, an author can arrange the underlying HTML in a way that doesn’t always make sense to users when linearized (navigated in DOM or code order). As such, there is risk for both confusing reading order and focus order, which the working group has decided it should use yet more CSS to address. There were also a few years where using CSS grid could break semantics, necessitating ARIA to restore.

Tip Probably refer to this as CSS grid.

2. CSS Subgrid

Building on CSS grid, CSS subgrid (no hyphen) provides a way to nest CSS grid layouts but still have these nested layouts match widths and heights of contained items across the larger grid. If this sounds confusing, it’s only because I’ve done a poor job explaining it.

CSS subgrid retains all the reading order, focus order of CSS grid and, in the case of older browsers, the semantic risk.

Tip Probably refer to this as CSS subgrid.

3. ARIA Grid

An ARIA grid is a composite interactive widget that provides two-dimensional programmatic relationships between HTML nodes. It’s composite in that a well-formed ARIA grid is made up of many roles (grid, rowgroup, row, rowheader, columnheader, gridcell) with specific relationships (rows and columns). It’s interactive in that individual cells within the grid can take focus. Critically, you as the author must add all the interactivity and focus management.

Generally you might use ARIA grid if you want to re-create a spreadsheet application or make a fully interactive calendar. You would not use it for layout. You wouldn’t use it just to make parts of a table interactive (like clickable rows).

Tip Probably refer to this as ARIA grid.

4. ARIA Treegrid

At its simplest, ARIA treegrid is little more than ARIA grid with expandable rows but with worse support. It uses the same roles (though treegrid versus grid as the root).

Just as with ARIA grid, you as the author need to manage focus and add the interactivity. Just as with ARIA grid, you don’t need it if all you want is a table with expandable rows.

Tip Probably refer to this as ARIA treegrid.

5. ARIA Layout Grid

To be clear, ARIA layout grids are not really a thing except in the uncanny valley of the ARIA Authoring Practices Guide. While I generally maintain ARIA grids are as confusing to authors as to users, the ARIA layout grid is a proper anti-pattern.

It is critically important not to use ARIA layout grids anywhere. I filed an issue in 2019 to remove the ARIA layout grid examples.

Tip Probably refer to this as ARIA layout grid and never use it.

6. HTML Tables

Before I move on to other terms that explicitly use “grid” in their name, I want to address the native grid-like structure in HTML. The HTML <table> element lets authors represent data that expresses a two-dimensional relationship (rows and columns). It is not a composite interactive widget, however a table can hold interactive bits (checkboxes and text fields are common) and, through ARIA and script, support features like sorting or, through CSS, fixed header cells.

Because the relationships between cells are programmatic, you can even have a responsive layout that removes the visual grid (though you may need to use ARIA table roles for older browsers owing to bugs). Remember, however, that tables are not meant to be used as a layout tool. This isn’t 1998.

Tip Probably refer to this as an HTML table.

7. Data Grids

Many developers may call for a “data grid” in a project, which to them may be interchangeable with a static HTML table or a highly interactive ARIA grid. They may be thinking of ag-Grid (notoriously hostile to accessibility), one of many React data grids, or assorted other patterns.

These pre-built libraries typically have a couple things in common: poor accessibility and reliance on ARIA to make sense of complex <div> structures. As such, it might be best to first identify how interactive your two-dimensional data needs to be and then explore solutions that aren’t barriers for users. Sadly, my experience from years of consulting is that most data grid library accessibility claims are wrong.

Tip Probably refer to this by using the full name of the library.

8. Design Grids

These pre-date the web. As traditional print designers ported their skills to the web, one part of the process they carried over was the concept of the 12 column grid. The 12 columns enforced balance when design elements expanded to two, three, four, six, and more columns. Mixing and matching column spans allowed for flexibility in design and consistency in alignments.

Some designers will only see this grid within Figma or their design tool of choice. Some will never see it, but instead intuit it from their 12 column CSS grid code, which is where you will generally encounter the overlap in terminology.

Tip Probably refer to this as a design grid.


Be careful when using the word grid on its own in your projects. Be certain you have chosen the term that accurately describes the pattern you want.



Thanks Adrian,
just wanted to report a small duplicate id issue

h2 id=”Data” used on HTML table and h2 id=”Data” used on Data grids.

Thanks for nice overview.

In response to Vod. Reply

Fixed. Thanks!


I know that HTML Tables should never be used as a layout tool, but thanks to the giant market share of e-mail clients that live in the past (and some that seem to be in zombie mode), I think it is fair to mention the HTML table as the most robust way to have a grid in email HTML world.

I know, I know…

And – according to my memory (please check that table semantics is not exposed in this border case) – important note:
role=”presentation” is absolutely required on these formatting tables, and actually all semantic table relevant children (thead, tbody, td, tr, th,…)).

In response to Vod. Reply

My experience is that for email you only needed to set role="presentation" on the <table> and it would cascade down to all owned descendants. My experience is also (thankfully) limited.

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>