Design each repeating section to look right at three, ten, and fifty items. The count will change and the layout will not be revisited.

The count always changes

A new site has six photographs, two case studies, and four testimonials.

Two years later it has sixty photographs, two case studies still, and forty testimonials.

Whichever direction each one went, the layout was designed for the original number and nobody went back.

So the site looks progressively less considered as it fills, which is the opposite of what should happen.

Test each repeating section at three counts

The last two are the ones that get skipped. A grid designed for a row of three looks like a mistake with one item in it, and a section with none is the empty state nobody wrote.

Grids need a rule for the last row

Since this is the most common visible failure.

A three-column grid with seven items has a last row containing one, sitting alone on the left, which reads as unfinished.

Either accept it, centre the remainder, or let the items stretch to fill the row.

Whichever you choose, choose it, since the default is usually the version that looks like an accident.

The same applies to a two-column layout with an odd number, which happens more often than three-column does.

Check yours by counting the items and imagining one more or one fewer.

Decide where paging begins

Before the number gets there.

A list of ten is read, a list of thirty is scanned, and a list of a hundred needs filtering or nobody sees past the top few.

Decide now what happens at each threshold: show all, show twenty with a link to more, or add a filter.

Adding that later means somebody notices the page has become unusable, which is usually after it has been unusable for a while.

For most small business sites the thresholds are around twenty for a list and around thirty for a gallery.

Below those, showing everything is simpler and better, and it avoids building a mechanism you do not yet need.

A worked example

A business had a gallery designed around twelve photographs in a neat grid.

Three years later it held ninety, all on one page, loading slowly, with no way to find anything in particular.

The design had never been wrong, it had simply been designed for twelve.

They added categories, showed twenty-four at a time, and put the six best at the top as a selected set.

The page loaded faster and people actually reached the later photographs, which nobody had been doing.

The work would have been ten minutes at the original build and took an afternoon at ninety.

Design the ordering as well

Since a growing section needs a rule for what appears first.

Newest first works for posts and badly for services, where the newest is not the most important.

Manual ordering works until there are thirty things and nobody maintains it.

Best or featured first, with the rest in another order below, handles both and is the arrangement most small sites want.

Decide it at the start, because the default is usually whatever order things were added, which becomes meaningless quickly.

Leave the structure room, not the pages

The distinction worth drawing, since designing for growth can be overdone.

Making the navigation able to accept a fourth service is sensible and costs nothing.

Building the fourth service page before the service exists is waste, and it will be wrong when the service arrives.

Similarly, a gallery that can be categorised later is good, and creating eight empty categories now is not.

Design the container to flex and leave it holding what you actually have.

The test is whether the accommodation costs anything today: if it does, it is probably premature.

Watch the ones that shrink

Since growth is only one direction.

A team page designed for six people looks wrong with two, and a services grid designed for nine looks sparse with four.

Businesses change and sections lose items, and the layout is rarely revisited for that either.

Where a section has shrunk, change the arrangement rather than leaving gaps: two items presented as two, rather than as a three-column grid missing one.

That is a quick fix and it removes a visible signal that something used to be there.

Somebody has to add the next one

The half of this that is not design at all and decides whether the section grows properly.

A gallery that requires resizing an image to exact dimensions, or a case study that requires four fields nobody remembers, gets added to less often than one that does not.

So a section designed to demand precise input quietly stops being updated, and the layout question never arises because the content never arrives.

Make adding an item as close to dropping in a photograph and a sentence as the platform allows.

Where that is not possible, write the three steps down and put them where whoever does it will find them, since the barrier is almost always not remembering rather than not wanting to.

Check the ones that have already drifted

Since most sites have a section past the count it was designed for and nobody has looked.

Go through the site and count the items in each repeating section, then compare that against how many it visibly expects.

A gallery, a testimonial list, and a blog index are the usual three, and one of them is almost always well past its comfortable range.

Fix whichever is worst rather than all of them, since the return concentrates in the section people actually reach.

Note the count while you are there, so next year the comparison is a number rather than an impression.

The counter-case

Most of this only matters where things actually accumulate.

A site with five fixed service pages and no gallery has nothing to grow, and designing for scale it will never reach is wasted attention.

Over-anticipating also produces complexity now for a benefit later, which is the standard trap.

And a section that has grown awkwardly can be fixed in an afternoon, so the cost of getting it wrong is not large.

Test each repeating section at one, ten, and fifty, decide the paging threshold, and set the ordering rule.

What to check

  1. List every repeating section.
  2. Picture each at one, ten, and fifty.
  3. Fix the last row of every grid.
  4. Decide the paging threshold now.
  5. Set an ordering rule.
  6. Write the empty state.
  7. Recheck sections that have shrunk.

Step two is the whole exercise and takes ten minutes at design time, against an afternoon once the count has drifted past what the layout supports.

The business version of this question is covered in designing for a business that might grow.


Frequently asked questions

Why does this matter?

Because the count always changes and the layout is never revisited, so a site looks progressively less considered as it fills, which is the opposite of what should happen.

What should I test?

Every repeating section at one, ten, and fifty items, plus zero. One and zero are the counts that get skipped and produce the most visible failures.

What is the most common grid failure?

A last row with a single item sitting alone, which reads as unfinished. Either accept it, centre the remainder, or let items stretch, but choose deliberately.

When should paging start?

Around twenty for a list and thirty for a gallery. Below those, showing everything is simpler and better. Decide the threshold before the count reaches it.

What ordering rule works?

Best or featured first with the rest below in another order. Newest first works for posts and badly for services, and manual ordering fails past about thirty items.

Can this be overdone?

Yes. Make the navigation able to accept a fourth service; do not build the fourth service page before it exists. Design the container to flex, not to be full.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Gallery designed around twelve photographs?

Picture it with ninety. That is a ten-minute fix now and an afternoon later.

Start a Conversation