Grid-Layout Background lines
Does anybody know how can you achieve a similar result to this? I've seen a bunch of websites using lines in the background that integrate the Grid-Layout.
10 Replies
I see the page as two separate grids, a 2⨯2 on top & 3⨯3 on bottom.
Do you know how to write grid-based CSS?
It's not the layout that I don't know how to set up. The challenging part is to make the white lines on the background as a design feature. The full site is (buildui.com)
If you can create the grid, then why not just put a
border: 1px solid #FFFFFF88 on the divs that make it up to outline them?Because if you look closely, some of the lines go through the whole height of the website and not individually in sections
Did you check with the DevTools?
I see that they use the pseudo-element *, : before, :after with plenty variable.
I think that this is the way.... if you remove the border on them the grid disappear.
Maybe you can check by yourself and understand better than me what's the story in there
Looks like he just has an absolute grid positioned in the background, you can target it in dev tools with
pointer-events-none absolute inset-0 flex justify-centerIf you want borders that escape the bounds of an element
border-image is a possibility. https://codepen.io/jsnkuhn/pen/vYbgqoN?editors=0110Set a background image with a gradient or a repeating pattern on the body or on a pseudo element absolutely positioned
Edit: I like Ian UKs suggestion better.
no, it's just 1 simple 3 col grid with colspan for the first element lol
actually technically 5 cols because you have the main safearea and then the ones on the sides.