Best Practice for Layout Grid spacing

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Best Practice for Layout Grid spacing

Post by Pablo »

The top and bottom padding is for the grid itself, not for the columns.
The gutter specifies the spacing between columns.
Each column itself also has padding.

Also, you can use nested grids to implement more advanced layouts.
And of course there are also flex grids where the global spacing can also bet set.
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Best Practice for Layout Grid spacing

Post by Starb7 »

Thanks Pablo, your help and patience, as always, is much appreciated. Cheers
User avatar
onlye
 
 
Posts: 366
Joined: Sun Jun 17, 2018 12:36 am
Location: Gluckstadt, MS USA
Contact:

Re: Best Practice for Layout Grid spacing

Post by onlye »

onlye
Gluckstadt, MS USA
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Best Practice for Layout Grid spacing

Post by Starb7 »

onlye wrote: Fri Apr 16, 2021 7:07 am Something like this?

https://www.onlye.org/postweb/starb7/
Hi Onlye, yes, like I have done but is it using a Cell Grid and are there spaces between cols? I have done something to get what I wanted (as per the links) but if you have managed to get the 'small gap' to work, I'd like to know how :)

Thanks for responding.

Cheers
User avatar
onlye
 
 
Posts: 366
Joined: Sun Jun 17, 2018 12:36 am
Location: Gluckstadt, MS USA
Contact:

Re: Best Practice for Layout Grid spacing

Post by onlye »

Starb7 wrote: Fri Apr 16, 2021 7:43 am
onlye wrote: Fri Apr 16, 2021 7:07 am Something like this?

https://www.onlye.org/postweb/starb7/
Hi Onlye, yes, like I have done but is it using a Cell Grid and are there spaces between cols? I have done something to get what I wanted (as per the links) but if you have managed to get the 'small gap' to work, I'd like to know how :)

Thanks for responding.

Cheers
I used a layout grid with 3 columns. I used cards for the objects (one in each column). I added padding to each of the columns. You can use that to adjust how big the gap is. I also added some margins above and below the cards so that you get a gap when they hit the breakpoint and stack. I saved the file here if you want to look at it (file name is starb7.wbs)

http://onlyemkt.com/wwbforum/
onlye
Gluckstadt, MS USA
User avatar
Starb7
 
 
Posts: 281
Joined: Tue Sep 05, 2006 12:35 pm
Location: Derbyshire

Re: Best Practice for Layout Grid spacing

Post by Starb7 »

onlye wrote: Fri Apr 16, 2021 3:21 pm
Starb7 wrote: Fri Apr 16, 2021 7:43 am
onlye wrote: Fri Apr 16, 2021 7:07 am Something like this?

https://www.onlye.org/postweb/starb7/
Hi Onlye, yes, like I have done but is it using a Cell Grid and are there spaces between cols? I have done something to get what I wanted (as per the links) but if you have managed to get the 'small gap' to work, I'd like to know how :)

Thanks for responding.

Cheers
I used a layout grid with 3 columns. I used cards for the objects (one in each column). I added padding to each of the columns. You can use that to adjust how big the gap is. I also added some margins above and below the cards so that you get a gap when they hit the breakpoint and stack. I saved the file here if you want to look at it (file name is starb7.wbs)

http://onlyemkt.com/wwbforum/
Hi Onlye, yes that works well and thanks for the project. Using a card to create the coloured background gets around the problem/issue (not a bug?) where the gap cannot be seen if the columns background property is set to solid. Thanks for the Card Hint, they look useful! Cheers
Post Reply