Hey all, is there a way to edit the default styles of a grid? Just as you can edit the global styles for headings, buttons, etc, it would be great if we could add in a grid and have it be the specific rem spacing we want every time. Right now the workflow is, add a grid, change px to rem needed, and if you have 100+ grids with different classes it’s gonna be a pain.
No read only link, just a question
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi @Arnau_Ros_Salvador the simplest way is to write custom class you can apply to your container.
.grid-5-10{
display:grid;
column-gap: 5rem;
row-gap: 10rem;
}
.grid-1-3{
display:grid;
column-gap: 1rem;
row-gap: 3rem;
}
.grid-1{
display:grid;
gap: 1rem;
}
create basic div element and give its class and all will be set.
Hey, I’m not sure if that answers my question as I want to use a grid element rather than a div. (I know we can create grids using flexbox, but in this case I’d need to use a grid). Is there a way I could do this with a grid element? Apologies if I’m not understanding you correctly & thank you for your reply.
hi @Arnau_Ros_Salvador firstly WF predefined Grid element is just a basic div that WF populates with some basic settings and name Grid.
When you follow my instruction to test what I have to recommend you will see that the grid option is applied in UI as I have mentioned.
Yes, you can select grid from UI and give it a class and with custom CSS set properties you need on your class.
.grid-1{
gap: 1rem;
}
But it is IMO not practical as the easiest way is to set everything in custom code as in the example above.
