From list to grid with the new "grid" class

Ordered and unordered lists can now be turned into grids by adding a single CSS class

Site Managers and Editors can now transform lists like this:

Ordered list example with 6 list items
Image by Lee-Yan Marquez.

to a grid like this:

an ordered list in a grid format one number per box

All it takes is applying the grid class to the list element:

<ol class="grid">
    <li>This is the first list item</li>
    <li>This is the second list item</li>
    <li>This is the third list item</li>
    <li>This is the fourth list item</li>
    <li>This is the fifth list item</li>
    <li>This is the sixth list item</li>
</ol>

This class can be used with ordered (ol) and unordered (ul) lists, but not with definition (dl) lists.

Grids can be used to show:

A gallery of images

a grid of 8 squares, each containing a photo of a bird and the bird name

Steps in a process

Seven steps to submit a research paper- example of the grid class applied to a process, each step in it's own box

Content previews

2017 year in review. Thumbnail photos, text and links to various articles shown as article previews using the grid class

Sectional navigation

the grid class applied to graphics and links indicating different Areas of study

Click through to the IT Knowledge Base to learn how to use grid along with other CSS classes to produce the examples above, as well as code snippets that will help you get your grid on.


Related content:

Back to top