How can I create a dynamic grid/column layout in Webflow that is populated from a collection and each item in the grid has its own predefined height, with the goal of all columns having the same height?
TL;DR
- Use Webflow’s CSS Grid for the Collection List and set a fixed or min-height on each Collection Item.
- Ensure consistent column and row sizes by avoiding auto height and using flexbox inside items for content alignment.
You're trying to create a dynamic grid from a CMS collection in Webflow where each item has a fixed or predefined height, and you want all columns to align with equal heights, regardless of content length.
1. Use CSS Grid with Collection Lists
- Drag a Collection List onto the page and bind it to your collection.
- Set the Collection List’s display to “Grid” in the Style panel.
- In Grid settings, define the number of columns (e.g., 3 or 4) to control layout.
- Ensure that each Collection Item takes up one grid cell.
2. Set Fixed or Predefined Height for Grid Items
- Select the Collection Item and give it a fixed height, or use min-height if you want slight flexibility.
- Use flexbox inside each item to vertically align content if needed.
- Avoid using auto height if you want consistent column sizes.
3. Keep All Grid Rows Uniform
- In Grid settings, ensure the row height is set to “Auto”, but the items themselves have a fixed height to keep all cells aligned visually.
- Alternatively, set the row size to “1fr” across all rows if you don’t want row height to adjust based on content.
4. Optional: Fill the Grid Gaps
- If you want a Pinterest-style layout with items of different heights but same column widths, use Masonry-style layout via custom code (requires JavaScript).
- However, for uniform height columns, a standard CSS Grid with fixed item heights is the correct approach.
5. Use Flexbox Inside Items (If Needed)
- Inside each Collection Item, you can use flex layout with vertical direction and justify-content: space-between to spread content regardless of fixed height.
6. Publish & Test Responsiveness
- Webflow’s grid supports auto-layout responsiveness, so test at different breakpoints and adjust grid columns accordingly.
Summary
To keep all columns and items in a Webflow CMS grid the same height, use CSS Grid layout, assign a fixed or min-height to Collection Items, and avoid auto height. This ensures uniformity across all items regardless of content length.