Margins with your grid system

Hi folks,

Have a 3 col layout (col-4, col-4, col-4) if I apply a border to each of these items they look like they are butt up against each other, not great :frowning:

I would like spacing between these items, like for example the Skeleton Grid does with a little margin on each. Is this not possible with your grid system?

Any workaround?

thanks

Hi, you can achieve this by first dragging a div element into your columns, and then give the div a class, set margin of 20px (if that is the amount you want) and inner padding to 0px or more pix to provide for inner spacing (or whatever looks good to you…on each side. Then you can put your content in to each div, and there will be space between your div content, and you can assign border to a column class and the border will always be spaced between columns, by the amount of the margin/padding you give to the parent div element in each column.

Hopefully that makes sense, see if that works for you, and feel free to ask more questions…

Cheers

Thanks buddy. Came up with my own workaround. But big thanks for your tips :wink:

1 Like