Using the Gridset CSS Classes

Learn the syntax and how to use all of the classes Gridset gives you.

Column Spans

Gridset will generate all the classes you need to layout your page. For each grid in your set, use the prefix plus the columns you want to span to define the width and margins of an element. So an element that needs to span columns 3 to 5 on your desktop grid would get a class of d3-d5 (where d is your defined prefix for the desktop grid). An element that only spans the second column would be d2.


If that same element needs to span columns 1 to 2 on your tablet grid, just add a class like so: t1-t2 d3-d5.

Example Code

<article class="m1 t1-t2 d2-d4">
  <h1>Example Element</h1>
  <p>I will span the first column for a mobile grid (m), the first 
     two columns of a tablet grid (t), and the second to fourth columns 
     of a desktop grid (d).</p>
</article>

Please note: If you need to span all the columns of a grid or all of the columns within an element, use the *-all class. In a six column grid with a prefix of d, for example, there is no .d1-d6 class, only .d-all. Likewise, there is no .d1-d4 class within an element spanning .d1-d4, only .d-all again.

Offsets

Your Gridset CSS calculates all offsets for you. There is no need to worry about how many columns should be spaced between elements: this is all automatically applied by the CSS. You only need to add the right class to the right element. The Gridset CSS does the rest. Learn more about how this works in the blog.

Predefined Classes

For each grid, you also get some predefined classes that will help you with tricky layout situations. In these examples, * is the prefix defined for your grid:

*-all
Span the full width of the grid. Helps with clearing, too. Equivalent of adding width:100%.
*-hide
Hide the element for this grid.
*-show
Show the element for this grid.
*-showgrid
Apply the overlay for a specific grid to an element. Learn more about overlays.
*-clear
Clear left and offset by the distance from column one to the first column the element spans.
*-overlap
Adds clear:none to an element for a grid. Use this class to place elements without being limited by source order.
*-floatright, *-floatleft
Floats the element in a direction, adding the proper gutter margin to the opposite side. Allows text to wrap element.
*-clear
Clear left and offset by the distance from column one to the first column the element spans.
*-pad
Add left and right padding of half the gutter width on the outside of the element.
*-padfull
Add left and right padding of the full gutter width on the outside of the element.
*-padin
Add left and right padding of half the gutter width on the inside of the element.
*-padinfull
Add left and right padding of the full gutter width on the inside of the element.

Here is a look at how the padding will work with your layout:

Gridset padding classes

Next learn how to optimize your Gridset CSS for better performance ]