Layout grid
Grid systems are used for creating page layouts through a series of rows and columns that house your content. NS uses a responsive, mobile first, fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Basic structure
We use a flexible grid that is based on 12 columns, fixed margins and a gutter of 28 pixels. The gutter on the outside of the container is 14px. The container itself has a max-width of 1200px which makes the inner width 1172px on desktop. The columns are used to adjust the layout, making the best use of the space available.
.xl-12-12.s-2-4.s-2-4.m-4-12.m-4-12.m-4-12.s-1-4.s-1-4.s-1-4.s-1-4.m-2-12.m-2-12.m-2-12.m-2-12.m-2-12.m-2-121/121/121/121/121/121/121/121/121/121/121/121/12Note: Some of the smaller columns will be hidden on mobile in this example.
Breakpoints
We use the following breakpoints, where there are big changes to the grid. This covers all screen widths across many devices.
| Breakpoint | Pixels |
|---|---|
| Breakpoint S | 16px (threshold) |
| Breakpoint SM | 480px |
| Breakpoint M | 640px (primary breakpoint) |
| Breakpoint ML | 768px |
| Breakpoint L | 912px (primary breakpoint) |
| Breakpoint XL | 1024px |
| Breakpoint XXL | 1200px |
| Breakpoint XXXL | 1408px |
Your device is currently using breakpoint breakpoint S (16px).
Your device is currently using breakpoint breakpoint SM (480px).
Your device is currently using breakpoint breakpoint M (640px).
Your device is currently using breakpoint breakpoint ML (768px).
Your device is currently using breakpoint breakpoint L (912px).
Your device is currently using breakpoint breakpoint XL (1024px).
Your device is currently using breakpoint breakpoint XXL (1200px).
Your device is currently using breakpoint breakpoint XXXL (1408px).
Explore the code: more about breakpoints in section Objecs / Grid.
Example grid combinations
Below is an example of a frequently used grid combination on NS.nl. Click on the devices in the navigation bar or drag the browser to see the different breakpoints operating.
2/3 column
m-8-12
1/3 column
m-4-12
1/3 column
m-4-12
1/3 column
m-4-12
1/3 column
m-4-12
Equal heights
Each grid item is given a height defined by the content using javascript. The height of all grid items in a row will be equal, and will be as high as the grid item with the most (highest) content. This will create a more balanced layout.
Good to know
The flexibility of the grid means you can create various layouts and page types.
Design for the smallest sizes and lowest capabilities first. Then optimise for different screen sizes.
Don’t make assumptions about the devices that are being used.
Start with a single column layout and then bring in more columns as the content needs it.
See also our section about Mobile First Design.