How can I create a row with 5 columns using Webflow?
TL;DR
- Use a Grid layout with 5 equal columns (1FR each) and place 5 child elements inside.
- Alternatively, use Flexbox with 5 child Divs set to 20% width each and no wrap; adjust layout for responsiveness as needed.
To create a row with 5 evenly spaced columns in Webflow, you can use either a CSS Grid or Flexbox layout. Here's how to do it using both methods:
1. Using CSS Grid
- Drag a Div Block onto the canvas and give it a class name (e.g.,
row-wrapper). - Set its Display to Grid in the Style panel.
- Under Grid Layout, click "Edit Grid" and click the "+" sign to add 5 columns.
- Set each column width to 1FR for equal spacing.
- Add 5 child Div Blocks or elements inside the grid — one per column.
2. Using Flexbox (Alternative)
- Drag a Div Block onto the canvas and name it (e.g.,
row-flex). - Set its Display to Flex, direction to Horizontal, and Wrap to No Wrap.
- Add 5 child Div Blocks inside it.
- Set the child Div Blocks to a flex-basis of 20% or manually set their width to 20% each if fixed width works for your design.
3. Adjust Responsiveness
- On smaller breakpoints, consider stacking or reflowing the columns by:
- Switching Grid layout automatically in smaller screens.
- Or changing Flex direction to Vertical under mobile breakpoints.
Summary
To create a row with 5 columns in Webflow, use a Grid layout with 5 equal columns (1FR each) or a Flex layout with 5 elements set to 20% width. Grid is more straightforward for this use case and ensures equal spacing with minimal styling.