Grid container

To create a grid container, add a grid element onto the canvas or apply grid layout to an element.

Check out the Building CSS grid layouts in Webflow video course
In this lesson
  1. What's the grid template and how can I enable it?
  2. How can I customize my grid?
  3. ‍Adding tracks
  4. ‍Duplicating, deleting, and reordering tracks
  5. ‍Resizing tracks
  6. ‍Defining gaps

What's the grid template and how can I enable it?

You'll automatically enter grid template mode when you add a grid element onto the canvas or apply grid layout to the selected element. Then, you can enable and disable the template on any grid container whenever you want.

Enter template mode

To enable grid template mode when the grid container is selected, do one of the following:

  • Click edit grid in the styles panel
  • Click the edit grid button on the top left of the grid container on the canvas
  • Press enter on your keyboard
(1) Click edit grid in the styles panel— (2) Click the edit grid button on the top left of the grid container — (3) Press enter on your keyboard

To enable grid template mode if a grid child is selected, do one of the following:

  • Click edit parent grid under styles panel → grid child. This will select the grid container and open grid template mode.
  • Click the edit grid button on the top left of the grid container on the canvas
(1) Click edit parent grid under styles panel → grid child — (2) Click the edit grid button on the top left of the grid container

Exit template mode

To disable the template, do any of the following:

  • Click edit grid in the styles panel
  • Press ESC on your keyboard
  • Click “done” on the editing grid bar on the canvas
(1) Click edit grid in the styles panel — (2) Press ESC on your keyboard — (3) Press enter on your keyboard — (4) Click “done” on the editing grid bar

The on-canvas grid template

Once you enter grid template mode, you’ll see the on-canvas grid controls which allow you to customize your grid. You’ll also see a persistent snackbar that allows you to change the color of the template mask or leave template mode.

Good to know
Clicking the snackbar repositions it either to the top or bottom of the canvas.

How can I change the color of the grid template mask?

You can change the mask color (default pink) if it interferes with your design. Just click the round color swatch on the snackbar that appears when enter grid template mode and choose a different color.

Change the color of the grid template mask
Troubleshooting – I can’t see the grid template headings and tracks on the canvas

If you add a grid element inside of a flex container, the flex child settings may shrink the grid and hide the on-canvas controls and headings. You can fix that by either changing the flex child settings or by specifying dimensions (width and height) on the grid container.

Also, you won’t be able to access the track headings for rows and columns that are too small. You can adjust those tracks using the grid settings in the styles panel.

How can I customize my grid?

You can change the way your grid looks in one of two ways:

  1. using the grid template controls on the canvas
  2. through the grid settings in the styles panel
(1) Grid template (on canvas) – (2) Grid settings (styles panel)

It’s a good practice to define your grid on all breakpoints before plotting in your elements. So, first customize your grid template for each breakpoint based on the design you want to achieve. You can customize the grid template by:

  • Adding tracks (columns and rows)
  • Reordering tracks
  • Deleting tracks
  • Deleting non-existing tracks
  • Defining track sizing
  • Defining gaps

You can adjust these on different breakpoints to create different layouts for each device.

Must know
If there are items in your grid, the position of grid children will not change even if you add, move, or delete tracks. So, a grid child in column 2 and row 3 will remain in column 2 even after you move another column before it. That's because the column you just moved between column 1 and 2 now becomes column 2. Neither will moving the 3rd row to the end of the grid change the fact that the grid child is in row 3. Learn more about grid child positioning.

Adding tracks

In the style panel, you can add columns and rows in the grid settings. You can also add columns and rows in grid template mode on the canvas by clicking the [+] buttons.

(1) add columns and rows from the Style panel — (2) Add tracks on the canvas

Duplicating, deleting, and reordering tracks

(1) duplicate a track — (2) delete a track — (3) reorder a track

❶ Duplicating tracks

You can duplicate tracks to quickly add more columns or rows with the same sizing by clicking the duplicate icon that appears when you hover over a track in styles panel → edit grid settings or through the right-click context menu on the canvas.

❷ Deleting tracks

You can delete tracks you don’t need by clicking the trash can that appears when you hover over a track in styles panel → edit grid settings or through the right-click context menu on the canvas.

Deleting tracks with grid children

You can delete tracks even if they have items inside. When you delete columns and rows with content, a non-existing track appears to accommodate the grid child until you reposition it. You’ll see a warning in the styles panel → edit grid settings when you have non-existing tracks in your grid.

Non-existing tracks disappear once you reposition all your grid children.

❸ Reordering tracks

You can reorder grid tracks of varying sizes to create a desired layout. To reorder tracks, drag the handle that appears when you hover over a track in styles panel → edit grid settings.

Resizing tracks

You can define the size of each track individually to achieve a specific layout. You can resize a track in any of the following ways:

  1. In styles panel → edit grid settings, click the track listing.
  2. On the canvas, click the track heading and type in the length value(s).
  1. Also on the canvas, drag the resizing handles to resize a column or a row that doesn't have an auto sizing. Holding SHIFT will increase or decrease the track size by multiple of 10 (ex. 0.25EM will increase to 2.5EM, 1.25FR will decrease to 0.25FR and increase to 2.25FR and so on). If the track is too small and you cannot see the drag-handles, you can still drag the track heading to resize it.

Track sizing

By default, columns are 1fr wide and rows have a height of "auto". Each track can have either a default size (width or height), or it can have minmax values where you specify the minimum (max) length and maximum (max) length of a track. So, a track will never go smaller than the min value and never grow larger than the max value.

You can choose to use different units for each track from the unit menu.

A track of "Auto" length will adapt to the size of the longest content in that track. Tracks with a fractional (FR) value will fill the available space based on the fraction value. In a grid with 5 columns of 1fr each, the columns will be as wide as 1/5th of the width of the grid container. The FR unit will never be smaller than the content of the row or column. Learn more about the FR unit and track sizing.

Defining gaps

You can define the size of the gap between columns and rows in styles panel → edit grid settings. By locking the constraints, you can set both values by filling only one.

You can also change the gaps on the canvas by clicking and dragging the gaps. Hold shift while click-dragging to match the values for the column and row gaps.

Hold shift while click-dragging to match the values for the column and row gaps
What’s next?

Once you’ve defined your grid’s structure, you can start adding items in your grid: position grid children in grid cells, rearrange the content on different breakpoints. Learn about the grid child.

More helpful resources