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.

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.

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.

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).

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.

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.

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.

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.

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.

Probably refer to this as a design grid.

TL;DR

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.