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.
Each span has a list of CSS properties with measurements, including:
- 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
.d2element is different when it is nested within a
.d1-d2element, because the parent’s percentages compound with the child’s.
- 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
.d2element needs to have a left margin equal to the
.d1column 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.