Flexbox and Grid Layouts

The direction control offers four buttons: horizontal, vertical, and the two reversed variants (right to left and bottom to top).

The reversed directions change only how the page is drawn. Keyboard focus order and screen readers still follow the HTML order, so reversing a form or a list can make the focus jump around the screen. The same caution applies to the Order setting described below.

By default a flex row does not wrap: when the items are wider than the container, they shrink and, once they cannot shrink further, overflow. The wrap control has three options, labelled in the Designer as No wrap, Wrap and Reverse wrap. They map to flex-wrap: nowrap, wrap and wrap-reverse. A wrapping row gains a second alignment control, align content, for distributing the lines when the container is taller than the lines it holds.

The justify and align controls are drawn as rows of icon buttons, and their meaning depends on the direction.

In a vertical container the axes swap: Justify controls the vertical distribution and Align controls the horizontal alignment. Webflow redraws the icons to match the direction, which is a useful reminder when a button seems to do the opposite of what its label says.

The gap control sets the space between children and is available on both Flex and Grid. It writes the gap property (row and column gap), so the spacing exists only between items and not before the first or after the last. This is the main reason to prefer gap to margins on children: removing or hiding an item does not leave a stray margin behind, and wrapped lines get the vertical spacing for free. Row gap and column gap can be set independently by unlinking the two fields. Values can be written in px, rem, em or % or bound to a size variable, so a spacing scale shared by the whole site can drive every gap (see Variables and modes).

For the Fernbrook Gardens header, a nav-bar class set to Flex, horizontal, justify space-between, align center, wrap and a 24 pixel gap produces a rule of this shape in the published stylesheet:

Source: Webflow Help Center: Flexbox

Webflow only writes a property when it differs from the initial value of the browser, or when it overrides a larger breakpoint; the order of declarations in the published file is not significant.

Selecting a child of a flex container shows the Flex child section. It has three groups of controls.

Sizing has four presets and a custom mode:

Grow and shrink are relative numbers: two siblings with grow 1 and 2 split the free space one-third and two-thirds, and a value of 0 switches the behavior off. Basis is the starting size before grow and shrink are applied, either a length or Auto, which means the width or height of the element (or its content when none is set). The exact shorthand that the Designer writes can be a long-hand set of properties rather than a single flex declaration; the effect is identical.

Alignment overrides the container’s cross-axis alignment for one child (align-self) with the options Auto, Top, Center, Bottom, Stretch and Baseline (the names rotate in a vertical container). Setting a margin to auto on one side of a child pushes it away from its siblings, which is the usual way to put a "Buy tickets" button on the right of a navigation bar while the logo and links stay on the left.

Order offers Don’t change, First, Last and Customize order, which writes the order property. Items with the same order value keep their HTML order. Like the reversed directions, Order changes only the visual sequence and not the focus or reading order, so use it for cosmetic rearrangement (for example, moving an image above the text on mobile) and not for content whose sequence carries meaning.

Source: Webflow University: Flexbox container and child layout settings

The Fernbrook Gardens ticket buttons are three links of different lengths that should sit in a row on desktop, wrap on narrow screens and share the leftover space.

Source: Webflow Help Center: Flexbox

This pattern is "intrinsic" responsive design: the layout adapts because of how the sizes are defined and not because a media query changes them, which is cheaper to maintain than three sets of breakpoint overrides.

A track size can be written in several units, each of which is a different promise to the browser.

A minimum and maximum can be set on a track in grid edit mode, which writes minmax(). This is how a column is told "never narrower than 240 pixels, but share the space otherwise". The fr unit is the workhorse of Grid layouts because it avoids the arithmetic of percentages and gaps.

For card galleries, a fixed number of columns requires a breakpoint override for every screen width. Webflow supports the CSS technique that avoids this. To switch it on, reduce the grid to one column and one row, click the column header in grid edit mode, set a minimum and a maximum size for the column (for example 240 pixels and 1fr) and check Auto-fit. Webflow then writes a repeating track definition, and the browser decides how many columns fit.

Source: Webflow Help Center: Grid

At a container width of 1200 pixels the Fernbrook events gallery shows four columns, at 600 pixels two, and on a phone one, with no breakpoint override. auto-fit collapses empty tracks so that the cards stretch to fill the row, while auto-fill (the alternative in CSS) would keep the empty tracks and leave blank space at the end. Rows are created automatically as items are added.

With the default placement the grid fills cells from left to right and, when a row is full, creates a new one. The rows setting works like columns; the extra rows that the grid creates by itself are sized by the implicit row size (grid-auto-rows), which can be set to auto, a fixed height or a minmax() such as minmax(200px, auto) so cards have a uniform minimum height but grow with their content. A page built on implicit rows is more robust against CMS content of unpredictable length than one with fixed rows.

Selecting a child of a grid container shows the Grid child section. Its Position controls place the item by line numbers or by spanning.

Source: Webflow Help Center: Grid

The grid line numbering starts at 1 on the left or top edge, so a grid with three columns has four vertical lines; 1 / -1 therefore means "from the first line to the last line", which is the full width whatever the number of columns.

Grid areas give names to rectangular regions of the grid. In grid edit mode, drag across cells to define an area and name it; children can then be assigned to the area, and an area-based layout can be rearranged by redefining the areas instead of moving every child. Deleting an area moves its children to automatically generated rows and columns. The generated CSS is the standard grid-template-areas property on the container and grid-area on the children.

Source: Webflow Help Center: Grid areas

Areas make the layout readable in the stylesheet as well: the picture of the page is visible in the strings. They are especially useful for responsive reflow, because a mobile breakpoint can declare a single-column set of areas that places the sidebar after the content.

Grid accepts the same gap control as Flex, with independent row and column values. In Webflow’s stylesheet the pair appears as grid-column-gap and grid-row-gap in older exported files and as gap in newer ones; both are understood by every current browser.