Container

The block-level element you wrap your entire page with is usually called your container and wojo grid uses that tried and tested method to get the layout started. This container will define the width of your page, be it a fixed or relative measurement. By default, wojo grid uses a maximum width of 1440px

<div class="wojo-grid">
   <p>Your content here</p>
</div>

Row Groups

If you want a single-column page, then you don't need anything else, just use your .wojo-grid and pour your content into it. However, if you want a more common column-based layout, then you're going to need to start thinking in rows of side-by-side columns, what we, in wojo grid, call .row, which is again applied to a div.

A row is simply a wrapper of columns that keeps them together and helps align spacing between them. You only need a row if you have more than one column side-by-side, otherwise, either just put your content straight in the .wojo-grid or use a single, specific-width.

<div class="wojo-grid">
  <div class="row">
    <div class="columns">First column</div>
    <div class="columns">Second column</div>
  </div>
</div>