How do I build a grid layout in Webflow?

Turn a Box into a grid

Grid is a display setting for rows and columns. It is not a separate element you drag out by itself. Add a Box from the Structure section of the Add panel. Select the Box, open Style panel, Layout, Display, and choose Grid. Webflow also lets you set grid on other elements that support it, such as a Collection list.

Open grid edit mode when you want to work on the tracks. Click the wrench icon to the right of the Columns and Rows fields, or select the grid on the canvas and click the grid edit icon. Click Done on the canvas overlay, or the close icon in Grid settings, when you are finished.

Example: a services section needs three cards in a row on a desktop screen. The Box is the grid. Each card is a child. The heading of the section can sit above the Box, outside the grid, so it does not occupy a cell.

Set the columns, the rows, and the gap

Add columns and rows from Style panel, Layout, Display. Use the increase button, type a number, or open grid edit mode and use the plus icon. Delete a track with the decrease button, the trash icon, or by clicking the track header and choosing Delete.

The FR unit is a fraction of the free space, and it accounts for gaps. Three columns at 1FR share the width. A column at 2FR is twice a 1FR column. Use px, em, or rem when a track should stay fixed. You can also set a minimum and a maximum. Webflow's example is a row with a minimum of 200px and a maximum of auto, so the row can grow with its content and does not shrink below 200px.

Gap is the space between columns and rows. Set it under Style panel, Layout, Gap. Column gap and row gap are locked together until you click the lock icon. Drag the gap slider, or hold Option on Mac or Alt on Windows and drag across the columns or rows field, to change the size quickly.

For the three service cards, set three columns to 1FR, one row, and a gap of 24px. Unlock the gap only if the vertical space should differ from the horizontal space.

Place, span, and align the cards

New children fill the next open cell from left to right. If the row is full, Webflow generates another row. Change Direction under the Style panel to vertical when children should fill top to bottom instead.

Leave the cards on automatic placement when they should reflow. To pin one child to a cell, hold Shift while you drag it, or select it and set Style panel, Grid child, Position to Manual. A manual child stays in its cell. An automatic child moves into the next cell when you add something new.

To put a heading and a paragraph in the same cell, add a Box as the direct child, then hold Command on Mac or Control on Windows and drag the text into that Box. You can also select the Box and use Quick find.

Span an automatic child under Style panel, Grid child, Position by choosing how many columns and rows it covers. For a manual child, enter the column and row where it starts and ends. Align every child from Layout, Align. Align one child from Grid child, Align and Justify.

Manual children overlap when they share a cell. Reorder them in the Navigator, or change z-index, to pick which one is in front. Direction has a dense control that tries to fill holes left by spans. Webflow notes that dense changes where items display, not their order in the page source, and that this can be bad for accessibility. Leave it off for a simple card row.

Fit the grid to a smaller screen

On a phone, three columns of text are rarely readable. Webflow gives you two documented ways to respond. Remove columns on the smaller breakpoint, or turn on auto-fit.

If a column will not delete, set Direction to Row, and make sure no child is manually placed in that column or spanning it. Then delete the extra columns so the cards stack.

Auto-fit repeats columns for you. Delete all but one column and one row. In grid edit mode, click the column header, set a minimum and a maximum, and check Auto-fit. Webflow then generates more columns to fill the width and wraps them when the screen is narrower. For equal service cards, auto-fit avoids a separate column count on every breakpoint. For a layout where one card must stay on two columns, manual spans are easier to control by removing columns yourself.

Switch to the mobile portrait breakpoint and read the cards there before you trust the desktop view.

Publish the section you can scan

Open the published page and look at the services row on a wide window and on a phone. The gap should show between cards. A card alone on the second row usually means the row ran out of cells, or a span is wider than the columns you kept. If the grid is wider than the screen, a fixed pixel column is wider than the viewport. An FR column stays inside the space the parent has.

A grid of existing cards is ordinary layout work on a site you already have. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.