< Back to All Pod Tutorials

Grid

Steersman’s website application offers Grid design pods to allow greater flexibility with your content. A Grid will enable you to logically organize most of the different content pods we offer to maximize the page layout.

Each Grid pod must be added as a child of a Page Section and can only contain Grid Cell child pods. The Grid pod allows you to specify how all its content will be arranged. Your Grid can contain as few or as many columns and rows as your design requires.

Adding in a Grid pod

After creating your Page Section, click on “Add a line,” give your pod an “Internal Name,” and select Grid from the “Component” options.

Grid pod template

Pods tab

1. Internal Name: This title will not be visible on the website; it is only used for organizing your content.
2. Share: If you flag this pod, your chosen content and settings will be saved to be added easily throughout your website. *If you need to change this pod, you can adjust it in one instance, and it will automatically be updated throughout the site.
3. Child pod/Component: Here you will add your Grid Cells, where you will then add in your content.

Options tab

Grids can be configured using four CSS styling properties: grid-auto-flow, grid-template-columns, grid-template-rows, and grid-gap. We’ll go into more detail about each property later in the article.

1. grid-auto-flow: An auto-placement property.
2. grid-template-columns: Defines the width of columns.
3. grid-template-rows: Defines the height of rows.
4. grid-gap: Defines the space between columns and rows.
5. Drop shadow: Flagging this will apply a drop shadow around your entire grid.

Grid Properties

grid-auto-flow

A simple way to add columns to your Grid is to use the word “column” in the “grid-auto-flow” field. Below is an example of 4 Grid Cells using this field only. As you resize the screen, you can see that the columns automatically shift to rows, making it responsive and great for mobile.

grid-auto-flow: column

Your Grid can be much more intricate by using more values in the “grid-auto-flow” field and specifying each Grid Cell’s values, but we’ll cover more on that on the Grid Cell’s tutorial page.

You can learn more about “grid-auto-flow” values by checking out this link: grid-auto-flow CSS

grid-template-columns

This field allows you to specify the width of each column in your Grid. The widths of each column can be determined using pixels, percentages, or by frame size.

*It’s also important to note that a space separates values for your columns.

The following are a few examples of values for the “grid-template-columns”:

Example 1

grid-template-columns: 400px 600px

Below, the first column is 400px, and the second is 600px.

Example 2

grid-template-column: 50% 40%

The first column has 50% of the allowed content space, and the second column has 40%. Because the total does not equal 100%, there is 10% of empty space on the right.

Screenshot of the above example displaying the two columns and their widths, with the 10% space on the right.

Example 3

grid-template-columns: 1fr 2fr

The first column is one frame wide, and the second is double that, two frames wide.

Example 4

grid-template-columns: 500px 1fr

The first column will be 500 pixels wide, and the second will span the rest of the frame.

Example 5

repeat()

Use the “repeat()” value to apply a single setting for two or more columns. This allows many columns that share the same value to be written in a more compact form.

grid-template-columns: repeat(3, 450px)

The grid will be divided into three columns, 450 pixels wide each.

Example 6

minmax()

Applying the “minmax()” value is a way to ensure responsiveness. (If you resize your screen while looking at the above example, the text on the right cuts off). Adding a minmax() value will use the two values you input to hit the input’s minimum and maximum – ensuring your Grid is responsive.

grid-template-columns: repeat(3, minmax(200px, 1fr))

The grid will be divided into three columns. Each column will be at least 200px wide, ensuring three columns fit.

You can learn more about all the “grid-template-columns” possibilities here; grid-template-columns CSS

grid-template-rows

This field allows you to specify the height of each row in your Grid. Each row’s height can also be determined using pixels, percentages, or frame size. Learn more about row heights here; grid-template-rows CSS

grid-template-rows: 100px 200px

The first row is 100px high (cutting off text), and the second is 200px.

grid-gap

The “grid-gap” property lets you specify the gaps between columns and rows. You can put one or two values in this field. If you put two values, the first will be for the gap between rows, and the second will define the gap between columns. If you use one value, the gap between rows and columns will be the same. You can use pixels and percentages for this value.

Example 1

grid-gap: 10px 20px

The gap between rows is 10px high, and the gap between columns is 20px wide.

Example 2

grid-gap: 10%

The gap between rows and columns is 10% of the grid.

Drop shadow

By checking the “Drop Shadow” checkbox, you will apply a drop shadow around your entire grid.

If you are applying a “Drop Shadow” around a grid with text, you can use markdown margins to apply extra padding.

Here are a few markdown text examples to add margins:
{.top-margin} {.bottom-margin} {.left-margin} {.right-margin}

The example below uses {.left-margin} and {.bottom-margin} markdown. You can see the difference the added padding makes to the grid.

*Each grid example on this page has a “grid-gap” of 10px to show the separation of grid cells- except for specified “grid-gap” and “drop shadow” examples.

*Learn more about Markdowns in our Markdown Tools article.

Save and publish

To see your updated content on your website, you need to publish your page. In the Websites App, click on the Publish tab. Once there, click the Create button. On the next screen, you will select the website you want the page to publish to (if you have multiple websites) and check the Pages checkbox. Click Save at the top, then click Start.