Cheat Sheets

Grab any measurement you need from your grid set’s handy cheat sheets.

Gridset cheat sheets will generate every possible measurement for you, so all you have to do is find the correct span and copy its width and/or margin.

Grid set cheat sheet

Each span has a list of CSS properties with measurements, including:

width
This is the total width, in percentages, for the span. This number is calculated by adding the column widths together, and then adding in the gutters spanned. By clicking show nested, elements that span more than one column can also be expanded to show all of the measurements nested within the parent element. For example, the width of a .d2 element is different when it is nested within a .d1-d2 element, because the parent’s percentages compound with the child’s.
margin-left
The left margin works much the same way as the width does, but is used to offset the element by the proper amount if it is the first child of another element. So, for example, a .d2 element needs to have a left margin equal to the .d1 column plus one gutter.

You can also click the add padding button to get the padding class measurements for each span (more about padding in Using the CSS Classes).

Printing and Exporting Your Cheat Sheets

You can easily print your cheat sheets for quick reference by using your browser’s print functionality. Gridset will serve a printer-friendly version of the sheets to your printer.

In Mac OSX, if you want a PDF export of your cheat sheets, you can print as usual, but instead of hitting Print, click the PDF drop-down at the lower left and select Save as PDF.

Grid set print to PDF

Next, add team members to your grid set ]