<![CDATA[making grid lines visible on the live site]]>Hi folks. has anyone worked out a way to make specific grid lines visible on a live page? For example I have a 5 column grid, and I want to show black 1 pixel grid lines for each column, as a part of the design of the page.

]]>https://laythemeforum.com/topic/11577/making-grid-lines-visible-on-the-live-siteRSS for NodeThu, 14 May 2026 16:28:16 GMTThu, 19 Feb 2026 23:10:51 GMT60<![CDATA[Reply to making grid lines visible on the live site on Wed, 25 Feb 2026 10:20:38 GMT]]>yea this is kinda hard to do :/

]]>https://laythemeforum.com/post/46415https://laythemeforum.com/post/46415Wed, 25 Feb 2026 10:20:38 GMT<![CDATA[Reply to making grid lines visible on the live site on Tue, 24 Feb 2026 00:06:52 GMT]]>Ok thanks for this. It might be a way to do it, feels like it could get slightly messy. I will have to test out how it scales and also the mobile implications.

]]>https://laythemeforum.com/post/46399https://laythemeforum.com/post/46399Tue, 24 Feb 2026 00:06:52 GMT<![CDATA[Reply to making grid lines visible on the live site on Mon, 23 Feb 2026 09:33:01 GMT]]>thats a little harder to do.

if you use your browsers inspector, and check out any .column-wrap div, you will see:

image.png

if you copy the CSS you see:
grid-template-columns: 50px minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 50px;

this is basically the grid. this code will look different for you. cause probably you setup the grid differently than me.

now if you ask gemini or chatgpt:

create html and css where its an overlay position fixed on top that creates vertical lines on top of the grid columns. this is the grid we have:

grid-template-columns: 50px minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 1% minmax(0, 1fr) 50px;

you may get a good answer that contains javascript, css and html to create this.

otherwise you can just add vertical lines:
9a17111c-484a-4b95-9438-25951fc46923-image.png

fbcf1824-4bf5-4b66-b09b-fcebb19692c8-image.png

]]>https://laythemeforum.com/post/46380https://laythemeforum.com/post/46380Mon, 23 Feb 2026 09:33:01 GMT