Adding & Editing Grids in a Set

How to add grids and manipulate columns to create completely bespoke grids within your sets.

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.

Adding your first grid

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.

Editing Grids

Once you have added a new grid, you can begin molding it into exactly what you need.

A four column grid example

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.
Columns
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.
Gutter
The gutter width sets the amount of space between columns. This can only be set in percentages, as Gridset’s output is always fluid.
Ratio
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.
Flip
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.
Reset
Clicking this button will reset the columns based on the current settings. It will erase any reordering or resizing of individual columns.

Manipulating 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.

Editing a column

The Edit Column bar gives you the following options:

Width
You can set any column to any width you need, and you can use any valid CSS unit.
Lock/Unlock
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.
Contrain
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.
Split
These buttons will split the selected column or columns into two or three new columns within the width of the original.
Combine
When selecting more than one column, you can hit Combine to merge them into one column that spans the total width of the selection.
Duplicate
Add a duplicate of the currently selected column or columns immediately next to right of the current selection.
Remove
Remove the selected column or columns from the grid. You can also hit the backspace key to remove selected columns.

Using Templates

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.

Managing Grid Sets

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.

Grid Menu

From here, you can change the name of your grid, duplicate the grid, or remove it from your set.

Now that you’ve mastered building grids, learn how to use them ]