The community members are discussing how to show a 12-column grid only in the design mode and not in the published version of a Webflow project. One community member suggests using an HTML Embed and an expression to conditionally show the grid based on the system.origin. Another community member asks why this is needed, and the original poster explains that they want to display the grid during the design phase without having to set the element to display: none before publishing.
The discussion includes references to Webflow's native grid guide and Timothy Ricks' Lumos framework, which seems to have a more flexible grid approach. Some community members suggest manually turning the grid on and off, while others recommend an automatic solution to hide the grid when the project is published. One community member provides a CSS selector to hide the grid in production, but cautions that it relies on an internal implementation detail that could change in the future.
The community members agree that a better solution would be to have a way to display the grid guidelines without the need for "hackery". An issue has been created on GitHub to further discuss and explore solutions for this use case.
theres probably multiple ways to tackle this but I'll take a stab. You could add an HTML Embed to the canvas and bind an expression to conditionally show it. It will show if the system.origin is equal to your project subdomain. This should work if you don't use the subdomain as your actual site. System.origin translates to whatever the domain you are currently viewing. So on a custom domain it would be yourcustomdomain.com but in the editor it uses the subdomain
I want to display the grid for the design phase and not set the element to display none every time before publishing. Timothy Ricks also has such an element in the lumos styleguide.
