making grid lines visible on the live site

[Glyph]

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.

[arminunruh]

thats a little harder to do.

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

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:

[Glyph]

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.

[arminunruh]

yea this is kinda hard to do :/