The Grid

Originally Centurion was built only a responsive grid, so at its core Centurion is built to be responsive. The grid is built using a Sass mixin, which makes it highly customizable. The only portion of the grid system that uses a pixel width is the container. For desktops the default container is set to 1100px wide and is fully fluid below 768px for tablets and smartphones.

Basic Structure

Utlizing the grid in your your project requires a container wrapper to set the main size of the area with grid elements inside to divide the space of the content area as needed. For example, if you want to use the full width for a banner that spans the page, then you would specify a ctn-grid-24. 24 columns is the full width of the default grid and is easily divisible in any design pattern. If you want to divide the page in two columns (a main body and a sidebar) you could use a ctn-grid-6 and a ctn-grid-18. The number corresponds the amount of columns that the grid will occupy within the container.

<div class="ctn-container">
  <div class="ctn-grid-2"></div>
  <div class="ctn-grid-22"></div>
  
  <div class="ctn-grid-3"></div>
  <div class="ctn-grid-21"></div>
  
  <div class="ctn-grid-4"></div>
  <div class="ctn-grid-20"></div>
  
  <div class="ctn-grid-5"></div>
  <div class="ctn-grid-19"></div>
  
  <div class="ctn-grid-6"></div>
  <div class="ctn-grid-18"></div>
</div>

Note: For each row make sure that you elements add up to 24 columns across in order to utilize the full row. However, if you want to center one grid element on each row then you will want to use Centering Grids below.