Base grid

The column grid used for page layouts.

About this style element

The ‘grid’ design separates a web page into individual content boxes.

Why we use this pattern

If a page contains lots of unrelated content, using a uniform grid layout can make it easier for users to browse many content options than a less rigid design.

The grid design can also make it easier for different designers or developers to work on the same page. It means they can work on different sections of the grid at the same time.

Demo

We’ve included a demo on this page that can be resized by dragging the bottom-right corner of the demo box in or out. This shows how the base grid adapts to different viewport sizes.

The base grid demo is scaled down to half the size of a normal base grid.

This example is also intended only as a visual demo. The HTML and CSS code used to create it should not be used in a live project.

Mobile version

In the demo, the individual boxes of the base grid span the width of the whole page on a mobile phone or other small device.

Open this example in a new window