Small screens, strong grids

Many visitors meet your grid on a phone, often before anything else. A grid designed for a wide screen and squeezed onto a narrow one shows it: tiny cards, texts that appear only on hover, a filter row that wraps into three lines. A grid designed for the small screen first rarely has those problems on a large one.

Start from the narrowest screen

Before you choose columns, decide the order of your content. On a phone the grid is a list, one or two items at a time, and its first items are the ones people see. Put first what matters most.

Then test the hardest case: your longest title, at the largest text size, on a phone. If that card works, the others will.

Columns for every screen size

A grid has its own number of columns for each of eight screen sizes, from Desktop XL to Mobile. Change the number where the cards get hard to read, not because a width is round: a card with only a photo and a short title stays readable much smaller than one with an excerpt.

The grid above shows four columns once its space is 1024 px wide, three from 778 px (a tablet), two from 640 px and one below that.

New in 4.0: a grid that counts its own space

The grid above counts its columns from the width of its own space on the page, not from the window: the buttons make that space narrower, and the grid takes the columns of that width, as a phone or a tablet would show it. So the same grid gets fewer columns in a narrow sidebar than across a wide page.

The setting is Columns follow: Container counts the grid’s own width, Window the window’s, as grids did until 4.0. A new grid starts on Container; a grid made before 4.0 keeps Window, so it keeps its look. Columns follow needs 4.0’s new front end: on a grid that runs on the classic one, the row is locked.

Cards that work without hover

A phone has no hover. Whatever a card shows only on hover, a visitor on a phone sees only after a tap. Keep what people need to choose a card at rest: the title, and whatever tells one card from the next.

In the skin editor, a layer’s Always show (Desktop, Mobile) shows it without a hover or a tap; the card’s own Always show, under Card › Hover, does the same for its cover. Hide on small items (Never, 240, 320, 480 or Custom) leaves a layer out when the card is narrower, so a small card keeps only what fits.

In new 4.0 grids the first tap on an item shows its hover and the next one opens its link, so nothing on a hover layer is out of reach on touch.

Filters, rows and images on phones

• Filters: with Phones: dropdown, small screens show one Filter menu instead of a row of buttons; Small screens: below sets below which width (768 px unless you change it).
• Rows: a grid with pages can show another number of rows on phones (Phones: own rows, Rows on phones), so one page is not a long scroll.
• Images: Smaller on phones gives phones a smaller image size (Size on phones), so they load less.

Where you set it

On the grid editor’s Layout page, the row Width, layout and columns has Columns: one row of eight devices. Click a device and type its number of columns. A device that shows “=4” follows the device above it, so one change can change several devices; Mobile is the last of the eight.

Edit breakpoints opens the table behind the row: each Device with its Items per row. With Breakpoints on Custom, the table also has From window width (px) for each device.

Below the table, Columns follow decides what those widths are measured against: Container, the grid’s own width, or Window.

To check a size, switch the preview with the device switch above it: the window’s width, 1170 (Desktop Medium), 778 (Tablet) or 390 (Mobile, a phone’s width). The preview then uses that device’s columns, and Columns on … in the quick bar changes the number for the device shown.

Phones: dropdown and Small screens: below are on the Navigation page, in Filters › How filters behave; Small screens: below shows once Phones: dropdown is on.

Always show is in the skin editor: choose a layer, such as Card › Title, then Look › Visibility, below Hide on small items.

Smaller on phones and Size on phones are on the Content page, in Media › Image size, beside Large screens.

Check it on a phone

The preview gets you close; a real phone gets you the rest. Open the page on a phone and check:

1. Can you read every title without zooming?
2. Can you tell where a card leads without a hover?
3. Are the filters one tidy row or one menu?
4. Does the first screen show the items that matter most?

Read on

• In the manual: Layouts: Even, Masonry and Cobbles, Filters, sorting and search, Loading and performance, The skin editor
• The guides: What a good grid does, Space is a design decision
• Examples: every example, each live on its own page