How can I use the same grid layout for both blog posts and listings in Webflow without encountering the lock icon issue?
TL;DR
- Wrap Collection Lists in a Div Block and apply the grid layout to the wrapper instead of the Collection List itself to avoid the lock icon.
- This method allows you to freely reuse the layout across CMS and static pages, including blog posts and listings.
To reuse a grid layout between blog posts and listings in Webflow without triggering the “lock icon” restriction, you need to avoid editing a Collection List directly that's tied to a CMS collection.
1. Understand the “Lock Icon” Issue
- The lock icon on a grid layout indicates that it’s controlled by the CMS and cannot be duplicated or edited freely.
- This normally happens when you create a Collection List and apply grid settings directly to it. Webflow locks it because it's tied to a dynamic source.
2. Use a Reusable Layout Structure
- Instead of applying grid settings to the Collection List itself, wrap your Collection List in a div and apply the grid to that wrapper.
- This way, the grid layout remains unlocked and can be copied or reused in other static or dynamic contexts.
3. Steps to Build a Reusable Grid Layout
- Add a Div Block to your page and name it something like “Grid Wrapper.”
- Set Display to Grid on the Div Block and configure your desired layout (e.g., 2 columns, 3 rows).
- Add a Collection List inside this Div Block.
- Inside the Collection List, add your content elements like image, text, etc. in a consistent Card layout.
- This method allows you to reuse or duplicate the layout easily, and since the actual grid is not applied directly on the Collection List, you won’t get the lock icon.
4. Copy or Reuse for Blog Posts
- For your blog post detail pages, replicate the same structural grid logic.
- Even though blog detail pages are typically single-item templates, you can use the same layout structure (e.g., for related posts or inline lists) using the Grid Wrapper.
5. Use Symbols and Nested Components (Optional)
- If the layout is meant to be reused across multiple pages, consider turning the card layout or grid structure into a Symbol with content overrides (for static items).
- For CMS content, use Collection Lists within these symbols, but still apply the grid to the outer Div.
Summary
To avoid the lock icon issue, apply your grid layout to a Div wrapper around Collection Lists instead of the lists themselves. This keeps the layout reusable across blog posts, listings, and other components in Webflow.