What is the grid system?

Your website is made up of a custom grid system consisting of 12 columns, allowing you to set up your content in 'tiles'. This content can include text, images, videos, buttons - pretty much anything you want! It's incredibly powerful and you can make lots of amazing layouts with it but you'll need to be familiar with the CSS and HTML. The table below details all of the available options.

Building your grid columns

Start with opening up your grid using the class grid-basic. Then add your items inside this using the class grid-item class. It's better to do that using really simple content such as 'item 1', 'item 2', 'item 3' so that you can get the layout right before complicating it with images, videos, and other text. That will look something like this:

<div class="grid-basic">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

By default, each grid item will span all 12 columns. To override this, add one of the classes from the table below. To make the grids as easy as possible to use, they are automatically optimised for mobile - this means when you choose a column size, you're choosing based on the desktop view and the mobile view will be automated. The table below details how many columns each class will occupy across mobile and desktop.

Anything that you want to have in one 'row' should add up to 12, e.g. two col-span-6 or three col-span-4. Your final code might then look something like this:

<div class="grid-basic">
  <div class="grid-item col-span-6">Item 1</div>
  <div class="grid-item col-span-6">Item 2</div>
  <div class="grid-item col-span-4">Item 3</div>
  <div class="grid-item col-span-4">Item 4</div>
  <div class="grid-item col-span-4">Item 5</div>
</div>

On your page, that will look like this:

Adding colour and content

Now that you've got your basic grid set up, you can start adding in background colours and content. Check out the rest of the Website Training Hub for how to add these.