How can I use the same grid layout for both blog posts and listings in Webflow without encountering the lock icon issue?
TL;DR
- Use explicit grid template areas instead of auto-generated grids to maintain layout consistency.
- Wrap the Collection List in a parent div with an explicitly defined grid to prevent Webflow's locked structure.
- Manually position Collection Items within the grid instead of using auto-layout to maintain flexibility.
- Apply consistent global classes to ensure styling uniformity across blog posts and listings.
- Copy only the grid wrapper, then reconnect the Collection List inside it to bypass Webflow’s CMS-based grid locking.
You’re encountering the lock icon issue because of how Webflow handles Collection Lists inside grids. Below is the correct approach to ensure your grid layout works for both blog posts and listings without issues.
1. Use Explicit Grid Template Areas
- Do not rely on auto-generated grids when adding a Collection List.
- Instead, set a manual grid layout using grid template areas under the Layout section.
- Define explicit row and column structure to maintain consistency.
2. Use a Static Grid Wrapper Outside the Collection List
- Wrap the Collection List in a parent div that has its grid layout explicitly set.
- Position the Collection Item inside without forcing Webflow to generate its own grid auto-layout.
- This prevents the "locked" grid restriction when copying between different CMS lists.
3. Convert Collection Items to Manual Grid Children
- Select a Collection Item and manually position it inside the grid.
- Avoid using Auto Layout inside Collection Lists unless necessary.
- This ensures you can use the layout for both CMS and static content without breaking the structure.
4. Apply Consistent Classes for Reusability
- Instead of directly styling Collection Lists, apply styles via global classes.
- Ensure your blog post and listing grids share a common class structure so they inherit the same styles.
5. Copy and Paste Responsibly
- If you copy a Collection List, remember:
- Webflow locks CMS-based grids, but you can bypass this by copying only the grid wrapper first.
- Then, reconnect a new Collection List inside it rather than pasting the entire locked structure.
Summary
To avoid the lock icon issue when reusing a grid, define the grid layout explicitly, wrap Collection Lists inside a static div, and apply consistent classes. Manually position Collection Items instead of relying on auto-generated grid settings. This ensures your blog post and listing layouts remain flexible.