Hi. How can we help?

Basic Columns

13 Mar 2018 in: Grid System

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 1440 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="row">
  <div class="columns screen-80">
    A main 80% column
  </div>
  <div class="columns screen-20">
    A 20% sidebar
  </div>
</div>

80%

20%