Webflow Flexbox and Grid: Alignment, Spacing, and Centering

Select a parent Div Block that contains child elements you want to arrange. Open the Style Panel (S). The first section is Layout. Click 'Flex' in the Display row (Block, Flex, Grid, Inline Block, Inline, None). The Style Panel immediately expands to show Flex controls: Direction (row icons and column icons), Justify (main axis distribution icons), Align (cross axis distribution icons), Wrap, and Gap. By default, children line up in a Row with no wrapping. The Flex container shows an interactive box model diagram — clicking the alignment buttons applies standard Flexbox values without needing to memorize CSS property names.

The most common use case for Flex is centering. Select the parent container. Enable Flex. Set Direction to Row. Click Justify to the center option (the icon with items centered on the horizontal axis — this sets justify-content: center). Click Align to the center option (the icon with items centered on the vertical axis — this sets align-items: center). Your child element(s) are now perfectly centered in both axes. For this to work, the parent container needs a defined Height — if Height is Auto, the container collapses to the content height and 'vertical centering' has no space to work with. Set Height: 500px or Height: 100vh.

Set Direction to Column to stack children vertically (like a vertical navigation or card stack). Wrap determines what happens when children overflow: 'No Wrap' (default) — children shrink or overflow; 'Wrap' — children wrap to the next line; 'Wrap Reverse' — wrap, but from bottom to top. Gap controls the space between children (replaces manual margins): set Gap to 24px to add 24px between each child. You can also set independent horizontal and vertical gap using the Gap controls — click the gap input to expand separate X and Y gap fields. Flex children don't need margin between them when Gap is set — the container handles all spacing.

While Flex controls are set on the parent, you can override alignment for individual children. Select a child element inside a Flex container. The Style Panel > Layout section shows 'Flex Child' controls instead of the parent Flex controls. Here you'll find: Align Self (override the parent's align-items for this child only — useful for a 'featured' card that stretches taller), Order (change the visual order of this child without changing HTML structure — useful for reordering on mobile), and Flex controls for how this child sizes itself (Flex Grow, Flex Shrink, Flex Basis). Set a child to Flex Grow: 1 to make it fill remaining space in the row.

Select a container Div Block. In Style Panel > Layout > Display, click 'Grid'. The Style Panel shows Grid controls: Columns template, Rows template, Column Gap, Row Gap, and cell alignment options. For a basic three-column layout: click the Columns input and set it to '1fr 1fr 1fr' (three equal-width columns, each taking one fraction of available space). For a two-column layout with a wider main column: '2fr 1fr'. For automatic responsive columns that fit as many as possible: use the Custom Properties section at the bottom of the Style Panel and add property 'grid-template-columns' with value 'repeat(auto-fit, minmax(280px, 1fr))'. This is the auto-fit minmax pattern that creates a responsive grid without any breakpoint overrides.

In the Grid layout controls, set Column Gap (horizontal space between columns) and Row Gap (vertical space between rows) independently. For a card grid, a common value is 24px for both. For alignment within cells, Webflow shows Justify Items (horizontal alignment of cell content) and Align Items (vertical alignment). Set both to Center to center all cell content. For individual grid items, select the child element and use Justify Self and Align Self in the Flex/Grid Child section of the Layout panel to override cell-level alignment. To span a grid item across multiple columns: select the child > Custom Properties > add 'grid-column' with value 'span 2' (spans 2 columns).

The common guideline: use Flex for one-dimensional layouts (a row of buttons, a vertical stack, a horizontal nav), and use Grid for two-dimensional layouts (card grids, dashboard layouts, image galleries). In practice, Webflow makes this easy to try either way. Flex with wrap = simple equal-width column grid. Grid = precise control over column widths, spanning, and placement. Specific scenarios where Grid wins: you need a masonry-like layout; you want a card to span two columns; you need precise row heights. Where Flex wins: centering a single element; navigation bars; any layout that should grow/shrink based on content size. Neither is wrong — use whichever produces the layout you need with fewer overrides.

Create a parent Div Block and set Display: Grid. In the Style Panel > Layout, you'll see the Columns template input. For a truly responsive auto-fit grid, the native Webflow grid UI doesn't expose the auto-fit/minmax pattern — you need Custom Properties. Scroll to the bottom of the Style Panel > Custom Properties section. Add property: 'grid-template-columns', value: 'repeat(auto-fit, minmax(280px, 1fr))'. Set Column Gap and Row Gap to 24px in the regular Grid controls. Now add 6 child Div Blocks (your cards) inside. On a wide screen they'll show 3-4 per row; on narrow screens they'll automatically reduce to 2 and then 1 column without any breakpoint overrides.