Grid

To allow greater flexibility, Steersman’s website application offers Grid design pods. A grid allows you to organize most of the different content pods we offer in a logical way to maximize the layout of the page. Each Grid pod must be added as a child of a Page Section and can only contain Grid Cell child pods. The Grid pod itself allows you to specify how all the content within it will be arranged. On this page I’ll cover all the different ways that you can use grids to manage your page content.

three column grid with cells.JPG

Each grid can contain as few as a single column up to as many as your design requires. You can use the settings under the options tab to organize your columns as needed. I’ll start with a simple example of a grid containing a single row and three columns.

grid options tab.JPG

The grids can be configured using four CSS styling properties shown in the image above. I’ll first go over how to configure each of these settings, and then provide an example of what a sample configuration would look like.

grid-auto-flow

This field controls how your grid cells are arranged within the grid. Since different cells could potentially vary in width and there is a limit as to how many of them can potentially fit into a single row, this settings allows you to specify how you want your cells to be arranged.

In most instances, you’ll be working with just two or three columns of content, so you’ll leave this field blank, however if you do want to implement a more complicated grid, the following is a list of possible values for organizing the cells:

  • row: This option tells the grid to fill each row with cells, creating a new row each time you run out of space. This is the default option when nothing is specified in this field.
  • column: This option will fill the first column with as many cells as it can, creating a new column each time more space is needed.
  • dense: This setting will try to optimize page real estate by trying to fill any possible gaps earlier in the grid. This makes sure that your grid is as tightly packed as possible, but could result in cells appearing “out of order”. You can also specify row dense or column dense if you’d like to tell the algorithm to prioritize filling one over the other.

grid-template-columns

This field allow you to specify how wide you want to make each of the columns in your grid. If no value is specified in this field, the grid will assume you want to place all of your cells into a single column, so unless that’s your intent, it’s important to configure this value for your grid.

The widths for each of the columns can be specified using pixels, percentages, or you can set it to span the whole frame, all depending on the layout you’re going for. You can also specify minimum and maximum width ranges for your columns using a minmax() function, which is a great way to incorporate responsiveness. The setting for each column needs to be space separated, but you can also apply a single setting for two or more columns by using a repeat() function.

The following are a few examples of possible values you can use in this field as well as the expected outcomes:

  • 100px 1fr - the first column will be 100 pixels wide and the second column will span the rest of the frame
  • 50% 40% - the first column will be 30% of the frame width and the second column will be 40%. Since the percentages don’t add up to 100%, you should insert a grid-gap value of 10% either between the columns or on either side.
  • repeat(3, 150px) - the grid will be divided into three columns, 150 pixels wide each.
  • repeat(2, minmax(200px, 1fr)) - the grid will have two columns and each one will be at least 200 pixels wide, making sure that the two frames together fill the width of the entire frame.

There are other CSS values that are also accepted by the grid, but these examples should cover most of the instances you’ll ever need to use and more.

grid-template-rows

This field allows you to specify the heights of each of your rows, provided your grid has more than one. Row heights can be configured exactly the same way as column widths, so you can refer to the previous section for valid values.

grid-gap

The gap property lets you specify the gaps between rows and columns. This field takes one or two values, with the first one specifying the gap between rows and the second specifying the gap between columns. Much like the other fields, you can specify the gap in pixels, percentages or em’s. You can also use a calculated value for this field by using the calc() function (i.e. calc(20px + 10%)).

If only one value is provided in this field, the same value will be applied for both column and row gaps.

Grid Cell Content

You can specify one or more different child pods within each cell of your grid and they will be arranged using the rules of the pods plus the rules you’ve specified for your grid. Each child pod within a cell will be placed vertically, one after the other. If you wish to arrange the child pods within a cell into columns, you’ll need to use another grid.

A Grid that’s added as a child pod of a Grid Cell pod can be configured using the same four CSS criteria we covered above, letting you control exactly how the grid will behave. Sometimes it is helpful to sketch out a plan for your layout before starting out in order to keep track of all the settings you need to configure.

Example

In my example in the beginning of this article, I’ve set a minimum column width of 300 pixels, a maximum width of 1 page frame, and specified that these settings should apply for all three of my columns. I’ve also specified 0 for the gap between rows, as we only have one, and 5% for the gap between columns. I filled each grid cell with different types of content and the following is how it would look on the resulting page:

sample view of content in three columns.JPG

Drop Shadow

The last feature you can add to your grid is a drop shadow around the whole thing, which can be done by simply checking the Drop Shadow box in the Options tab. The following is what the example from above would look like with a drop shadow around it.

three columns in grid with drop shadow.JPG

To read more about how to configure each of the cells within the grid, take a look at our Grid Cells page here.