Your First Grid
Now that you’ve created a new set you can begin building grids. You will be given the option to build a completely custom set of grids from scratch, or start a template. To begin a custom set, just enter the name of your first grid in the top field, then click Add.
The grid name should be a human readable name used for referring to the grid. For example, if your grid is intended to be used at desktop screen widths, you may want to name your grid Desktop. The name in no way effects the output of your grid, though it will appear as a label in certain assets such as your CSS and PNGs.
After one grid has been added to a set, you can add new grids via the small blue button next to Grids in this set in the left column.
Once you have added a new grid, you can begin molding it into exactly what you need.
A newly added grid will by default only have one column and be set for a width of 990px. You can quickly change this by using the settings across the top of the grid. Here is what each of these settings do (from left to right in the image above):
- Grid Prefix
- The grid prefix is used to create your custom classes for use in the CSS output. This prefix can only be 3 characters maximum, and cannot contain numbers or symbols. You can learn more about how the prefix is used in our section on CSS classes.
- Range min & max
- This sets the minimum and maximum viewport sizes for which this grid will apply. A viewport is anything your website might be viewed through, such as a browser, or phone screen. You can set ranges to any valid CSS unit, including px, em, cm, or none if you want no limit. The minimum and maximum range will be used to generate media queries that match these limits.
- The basis of any grid, you can set your column number here. You can have 18 columns at most, though the fewer columns you need to use, the better. Increasing or decreasing this number will immediately update the columns below based on the ratio set at right (more on that in a minute). Column widths are based on percentages by default.
- The gutter width sets the amount of space between columns. This can only be set in percentages, as Gridset’s output is always fluid.
- You can generate your columns based on one of many classic ratios. By default, a grid is set to even, meaning all of the columns will be even width, but you can also generate columns based on the golden ratio, or one of many other root rectangle proportions.
- Quickly flip the order of your columns right-to-left or left-to-right. Column numbers will stay with no. 1 at left and incrementing up to the right.
- Clicking this button will reset the columns based on the current settings. It will erase any reordering or resizing of individual columns.
Gridset gives you complete flexibility in manipulating your grid’s columns. You can sort them by simply dragging and dropping each column into position, and you can resize them by grabbing a handle on either side of the column and pulling its width in or out. When resizing a column, Gridset automatically calculates the widths of the other columns based on their current width, maintaining any proportions that already exist.
You can also adjust columns using the Edit Column bar that appears when you select a column (or group of columns). You can select a column by clicking once in the middle of the column, and you can select multiple columns by holding shift and clicking the first, then last column of your desired selection.
The Edit Column bar gives you the following options:
- You can set any column to any width you need, and you can use any valid CSS unit.
- By locking your column’s width, it will not be adjusted when other columns are resized. If it is unlocked, the column will be proportionally resized when other columns are resized.
- You can set a min-width, max-width or width on any single column. Min-width limits the column from narrowing below the set size, and max-width limits it from expanding above the set size. Width will set the size and not allow the column to expand or contract. You can use any valid CSS unit for these sizes.
- These buttons will split the selected column or columns into two or three new columns within the width of the original.
- When selecting more than one column, you can hit Combine to merge them into one column that spans the total width of the selection.
- Add a duplicate of the currently selected column or columns immediately next to right of the current selection.
- Remove the selected column or columns from the grid. You can also hit the backspace key to remove selected columns.
Gridset provides set templates to help you get started quickly. When your set is empty, select a template that is close to what you will need. The grids for that template will be added and saved to your set. You can then tailor each grid to your exact specifications. Templates are a great way to learn about what is possible with Gridset, and we add new templates occasionally to highlight new grid ideas and features.
Managing Grids in a Set
The left column of the Edit interface gives you a few options for managing the grids in your set. You can add new grids by clicking the small blue button next to Grids in this set, entering a name for your grid in the input field, and then clicking Add. You can also sort the order your grids display in the Edit interface by dragging and dropping them in the order you want. Changing this order will also change the order the grids are rendered in the CSS generated by Gridset.
Each grid also has a contextual menu with a few more options. You can access this menu by clicking the down arrow next to the grid’s name.
From here, you can change the name of your grid, duplicate the grid, or remove it from your set.