Responsive Grid Lines Studio

Ask the community
, , ,
1

Question:
I’m hoping there’s a better or easy solution to adding grid lines to my designs. A gridded website is such a common style, but I can’t find a way to do it. For example, when I add a 1px border to my grids (even CSS grids), it shows as a 2px grid where the sections meet. I am unable to make modern layouts like this.

I see the work-around is adding a line and stretching it to top and bottom but this will be really tie-consuming, adds extra code, and clients can easily update their sites like this.

Does anyone know a better way or a line of code I could add to achieve this? New to using Wix Studio, so don’t know how to code here.

Thanks!

Product:
[Which editor or feature is your question most relevant to? e.g. Wix Editor, Wix Studio Editor, Editor X.]

What are you trying to achieve:
1px lines between grids

What have you already tried:
Adding lines docked to top and bottom, using built-in features

Additional information:
Open to code or working with someone for a quick fix.

3

Hey @Kari_Livingston! :wave:

Have you had a chance to explore adding gaps to the section, rather than applying borders to the cells directly?

I’d likely set each cell with no border, but solid background. Then, apply a background colour to the section, and add gaps to the section (1px will add a 1px gap between cells)

Screenshot 2024-06-24 at 21.40.23
Screenshot 2024-06-24 at 21.40.232928×1496 250 KB

1 Like
4

Thank you! That’s a really clever workaround that looks like it will achieve the same effect!

It would still be nice that granular control over borders, so I put in a feature request.

Also, so excited about the release of the new Figma plugin today! Thank you guys for working so fast to make all these things possible :slight_smile:

5

That did work. I added a 1 px padding around the section to create the outside lines, too. Thanks again!