Grid system

Guidance

The 12-column grid system is a popular method for creating responsive layouts. It's based on dividing the layout of a webpage into 12 separate columns, which can be combined in various ways to create different layouts. Each element in the layout is given a certain number of columns. For example, three equal-width columns would each span four of the grid's columns.

On smaller screens, the grid can be adjusted so that the columns stack vertically instead of horizontally. This is typically done using media queries. This flexibility allows the layout to adjust seamlessly to different screen sizes, maintaining a clean and organized layout no matter what device the website is viewed on.

We use a 12-column flexbox grid system that uses a series of containers, rows, and columns to layout and align content.

• Container: The container centers and horizontally pads your content.
• Row: The row serves as the wrapper for columns.
• Column: The columns allow you to create different layouts, their class names indicate the number of template columns to span (out of 12) for example: .col-6

Breakpoints

The grid system has five different breakpoints. You can use breakpoint specific classes to control how the layout renders at different breakpoints. The grid system is mobile-first. When applying layout changes using breakpoints,

Grid layouts

Recommended grid layouts. For other combinations, please contact the GNB Design System team.

12 columns

This is a full width column at all breakpoints.

<div class="container">
	<div class="row">
		<div class="col-12">
			<!-- Your content here -->
		</div>
	</div>
</div>

4 + 8 columns

These columns will appear stacked and full width by default, then switch to a 4 + 8 column layout at the large breakpoint and up.

<div class="container">
	<div class="row">
		<div class="col-lg-4">
			<!-- Your content here -->		
		</div>
		<div class="col-lg-8">
			<!-- Your content here -->		
		</div>
	</div>
</div>

6 + 6 columns

These columns will start stacked and full width, and then appear side-by-side at the medium breakpoint and up.

<div class="container">
	<div class="row">
		<div class="col-md-6">
			<!-- Your content here -->
		</div>
		<div class="col-md-6">
			<!-- Your content here -->
		</div>
	</div>
</div>

3 + 3 + 3 + 3 columns

These columns will start stacked and full width, then shift to 6 + 6 columns at the medium breakpoint, and then to 3 + 3 + 3 + 3 columns at the large breakpoint and up.

<div class="container">
	<div class="row">
		<div class="col-md-6 col-lg-3">
			<!-- Your content here -->
		</div>
		<div class="col-md-6 col-lg-3">
			<!-- Your content here -->
		</div>
		<div class="col-md-6 col-lg-3">
			<!-- Your content here -->
		</div>
		<div class="col-md-6 col-lg-3">
			<!-- Your content here -->
		</div>
	</div>
</div>

4 + 4 + 4 columns

These columns will start stacked and full width, then shift to 6 + 6 at the medium breakpoint, and finally to 4 + 4 + 4 columns at the large breakpoint and up.

<div class="container">
	<div class="row">
		<div class="col-md-6 col-lg-4">
			<!-- Your content here -->
		</div>
		<div class="col-md-6 col-lg-4">
			<!-- Your content here -->
		</div>
		<div class="col-md-6 col-lg-4">
			<!-- Your content here -->
		</div>
	</div>
</div>

8 + 4 columns

These columns will appear stacked and full width by default, then switch to a 8 + 4 column layout at the large breakpoint and up.

<div class="container">
	<div class="row">
		<div class="col-lg-8">
			<!-- Your content here -->
		</div>
		<div class="col-lg-4">
			<!-- Your content here -->	
		</div>
	</div>
</div>