Grid 2.0 in Webflow

Learn how to use CSS Grid in Webflow and position content within a responsive layout.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

The grid layout in Webflow brings CSS grid to life on a completely visual canvas, giving you more direct control over your layout and design. With grid, you can reposition and resize items anywhere within the grid you define to produce powerful, responsive layouts — faster.

In this article, we’ll cover how to:

  1. Create and edit a grid
  2. Place content in a grid
  3. Move, span, and align grid content
  4. Design a responsive grid

Create and edit a grid

To create a grid, select the grid element from the Add panel. You can also apply the grid layout to an existing element in the Style panel.

Create a grid

Edit a grid

To edit a grid, press the “edit grid” button that appears in the Style panel and on the canvas when you have the grid selected.

Edit the grid

To exit the grid edit mode, press ESC or click “Done” on the canvas.

Add columns and rows

To add columns and rows, select the add buttons that appear on the canvas or in the Style panel.

Add columns and rows

Duplicate and delete rows and columns

To duplicate or delete a column or row, right-click on the column or row header and select duplicate or delete.

You can also delete or duplicate any row or column in the Style panel when you hover over a column or row.

Reorder rows and columns

To reorder rows or columns in the Style panel, open the grid settings and hover over the row or column you’d like to move and drag the handle that appears.

Adjust gaps between columns and rows

Gaps allow you to specify the space between grid items without adding margin or padding. To adjust the gap size between columns and rows, click and drag the gaps on the canvas or enter the desired gap size in the Style panel.

Adjust gaps between columns and rows

Adjust columns and row sizing

To adjust the size of grid columns, select and drag the column heading to the desired size on the canvas.

Adjust columns and row sizing

You can also enter a custom size for both columns and rows in the row or column heading on the canvas or in the Style panel.

Enter custom sizing for columns and rows

The FR unit

The grid layout introduces an additional length unit to help us define a grid: the FR unit. The FR unit represents a fraction of the available space in the grid container. It can be used to define the length of rows and columns just like a percentage or pixel unit. However, unlike fixed percentages or pixel units, the FR unit automatically calculates grid layout divisions while adjusting for gaps inside a grid.

Columns with a sizing value of 1FR will automatically stretch or shrink to fill the available space in a grid container. If you add or delete columns, all columns with 1FR unit will adjust accordingly.

Learn more about the FR unit.

The FR Unit

Min/Max settings

Setting min/max values ensures that your rows and columns don’t shrink beyond a set minimum value or expand beyond a set maximum value. For example, a row has a height of auto, by default, and will expand or shrink to fit the content within it. If you want your rows to have a minimum height of let’s say 200px, you can set the min value to 200px and the max value to Auto. This way, the row will grow based on the content but it will never shrink beyond 200px. You can do the same with columns.

To enter a min/max value for any column or row, enter the desired values in the track heading on the canvas or in the Style panel.

Min/Max settings

Place content in a grid

You can add anything inside of a grid: a heading, an image, a div block, and even another grid. Anything you add to the grid becomes a child element of that grid. By default, every new grid child will automatically populate an individual grid cell — filling in the next available cell from left to right. If there are no more available cells in a row, a new row will generate automatically to house new grid children.

Change the direction in which grid content flows

You can change the direction in which grid children are automatically placed by updating the direction settings in the Style panel. Here, you can select the default row setting, which places children from left to right, or change the direction to column, which places children from top to bottom.

Change the direction in which grid content flow

Manually position content in a grid

To override the auto placement settings completely and manually position an item in the grid, hold Shift while you drag the element into the grid. Any item that is manually positioned in the grid will retain the manual position setting.

Manually position content in a grid

To change the position setting of an existing grid child to manual, select the grid child and update the position setting in the Style panel.

Grid child position

Unlike automatically-placed grid children that will automatically move into the next cell to accommodate new grid children, manually-placed grid children will remain in their designated grid cell.

When you span autoflowing grid children, manually-placed grid children remain in their designated grid cell

Nest multiple elements in a grid cell

You can add multiple elements to a single grid cell by nesting elements within the grid child. To do this, you’ll first want to add a layout element, such as a div block, to the grid as the direct grid child.

Once you’ve added the layout element as the grid child, you can add other elements to that grid child by holding the Control key while you drag the elements into the grid cell.

Nest multiple elements in a grid cell

Duplicate content in a grid

You can duplicate a grid child to reuse the same content in more than one cell in your grid. You can do that in one of the following ways:

  1. Hold the Alt/Option key and drag the content to create and move the duplicate into a new grid cell
  2. Select and copy the content, then select the grid and paste the content

Move, span, and align content in a grid

Once you’ve placed your content in a grid, you can manipulate them as you please. You can move the content around to reposition them in different cells. You can span the content to take up multiple cells. You can also adjust the alignment of the content within the grid.

Move grid children

To reposition content in the grid, select and drag the grid child to the desired location on the canvas or in the Navigator.  

Move grid children

Set grid child order

You can also set the order of grid children in the grid child settings section of the Style panel.

Set grid child order

Align content in a grid

To update the alignment for all children within a grid, select the grid and access the alignment settings in the Style panel.

Align content in a grid

To change the alignment of a single grid child, select the grid child and update the self alignment settings in the grid child section of the Style panel.

Self alignment settings of grid children

Span grid children  

To span a grid child across multiple grid cells, select the grid child and drag the handles that appear in the corners of the grid cell.

Span grid children on the canvas

You can also span grid children in the Style panel. For a grid child with automatic positioning, specify how many columns and how many rows the child should span.

Span grid children through the Style panel

For children positioned manually, enter which column and row the item starts and ends in.

Span manually-placed grid children through the Style panel

Watch a video tutorial on Spanning content in a responsive grid.

Lock grid child positioning

Don't want to re-span your Navbar to fill all columns each time you add new columns? Want to keep your footer in the last row of the grid no matter how many rows you add to your grid? Want to keep the main content section always centered in your grid?

Negative grid child positioning values will save the day! Unlike positive numbers, negative numbers allow you to position children relative to the end of the grid. In other words, negative numbers reference cells from right to left or bottom to top.

So, to keep you navbar spanning across all columns, position it between column 1 (the first column) and column -1 (the last one).

To keep your footer in the last row of your grid at all times, position it in row -1/ -1.

You want to keep a child centered in the grid with the same number of columns on each side? Set the "end" value to be the negative equivalent of the "start" value. Example 3/-3 or 2/-2. What this means is that if you remove some columns on smaller breakpoints, the child will remain centered.

Clear grid child settings

Grid child settings apply only to the selected element and they aren't saved with the class. Pink grid child setting labels in the Style panel indicate which of these settings is applied to the currently selected element on the current breakpoint. These styles do cascade to lower breakpoints and are indicated with orange labels. The indicator will turn pink again when you override an inherited (orange) style on smaller breakpoints.

To remove any applied grid child setting, click the pink label, then click reset.

Pink labels indicate applied grid child settings.


Overlap grid children

Grid children with manual positioning will automatically overlap when they intersect in the same cell(s). You can control the stack order of those overlapping elements, either by repositioning them in the Navigator, or by adjusting positioning and z-index settings.

Watch a video tutorial on Overlapping grid content.

Fill empty grid cells

Empty cells may remain in the grid when you have spanned grid children. To automatically populate these cells with content, enable the dense setting in the Style panel.

Enable the dense setting to automatically fill empty cells in a grid

Design a responsive grid

To design your grid so that it is responsive across different viewports, you can either manually delete columns on smaller viewports or enable auto-fit to automatically generate columns and rows to accommodate smaller screen sizes.

Manually style the grid layout across breakpoints

To ensure that your grid is responsive on different device sizes, you can view your grid on smaller breakpoints and remove columns as needed.

Manually style the grid layout across breakpoints

If you are unable to remove columns on smaller breakpoints, ensure that:

  1. Your grid direction setting is set to row
  2. You have no manually-positioned grid children in those columns
  3. You have no children spanning across those columns

Enable Auto-fit

Auto-fit is one of the most powerful features of CSS grid, it allows you to repeat and wrap columns automatically so that you can build a layout that works across every single screen size — no per-breakpoint adjustments needed.

To enable auto-fit, delete all but one column and one row. Set minimum and maximum dimensions for the column and enable auto-fit.

Enable auto-fit to automatically generate columns and rows as needed

More columns will automatically generate and repeat to distribute content responsively.

With auto-fit columns, there's no need for per-breakpoint adjustments of the grid.

Watch a video tutorial on using auto-fit to turn a collection list into a responsive grid.

Browser support

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.