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 1200px
<div class="wojo-grid"> <p>Your content here</p> </div>
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 .columns, 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, column.
<div class="wojo-grid">
<div class="columns">
<div>First column</div>
<div>Second column</div>
</div>
</div>
To get you acquainted with the concept, we'll first explain how this works for large screens, large being an abstract concept used only to make things more intuitive, but which is defined by default to be wider than 960 pixels.
wojo grid offers all manners of percentage-based widths, from 5 to 100% with various intervals which are combinable to add up to 100 and these are accessible via the screen-% classes, in which the 'screen-' defines the screen size and '%' is a number from 5 to 100 in the intervals we'll list below (there's no trailing zero for numbers under 100).
<div class="wojo-grid">
<div class="columns">
<div class="screen-80">A main 80% column</div>
<div class="screen-20">A 20% sidebar</div>
</div>
</div>
Available column widths are: 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95 and 100%. You can mix and match them to add up to 100, inside a row. You even go over 100, but, obviously, there will be a break in your floats.
100%
95%
5%
90%
10%
85%
15%
80%
20%
75%
25%
70%
30%
65%
35%
60%
40%
55%
45%
50%
50%
66%
33%
33%
33%
33%
In order to create space between your columns, you will need to add gutters. As you might have guessed by the straight-forwardedness of wojo's grid class names so far, the class to use in this case is .gutters. Just add the class to your .columns block and you're set.
Keeping up with wojo's grid flexibility, if you don't like default wide gutters, then just use .small-gutters or .mini-gutters, instead, to halve that space. Also, if don't need the bottom space created by the .gutters class to separate the blocks, you can use .horizontal-gutters, .small-horizontal-gutters or .mini-horizontal-gutters for horizontal spacing only.
<div class="wojo-grid">
<div class="columns gutters"> <!-- or small-gutters -->
<div class="screen-80">
<p>A main 80% column</p>
</div>
<div class="screen-20">
<p>A 20% sidebar</p>
</div>
</div>
</div>
So far, we've talked about the 22 different widths you can divide your layout in, using classes such as .screen-50 and .tablet-25, now let's talk about 'medium' and 'small' layouts. Using 'screen-%', 'tablet-%' and 'phone-%', together with the 22 widths, you can define how much space each of your containers takes up in each screen; so, imagine you need a column that takes up 25% of a large screen(1200px), 40% of a tablet screen(max-width 959px) , 50% of a mobile screen (max-width 767px) and 100% of a phone screen (480px and less).
<div class="screen-25 tablet-40 phone-100">