Menu icon Foundation
Adding margin between columns (grid)

I have three columns (large-4) and I want to add margin-right: 1em to the first two columns. This pushes the last column down. How can I add margins between columns without disrupting the gird and the mobile responsiveness?

I tried adding width: 30% to each column but when resizing the browser, the columns just squeeze in together instead of stacking up on top of each other (preferred behavior).

Please help! Thank you!

girdmargincolumn

I have three columns (large-4) and I want to add margin-right: 1em to the first two columns. This pushes the last column down. How can I add margins between columns without disrupting the gird and the mobile responsiveness?

I tried adding width: 30% to each column but when resizing the browser, the columns just squeeze in together instead of stacking up on top of each other (preferred behavior).

Please help! Thank you!

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

Column gutters use padding.

You can change that in the _settings.scss file

$column-gutter: rem-calc(30);

or CSS

.column, .columns {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}

Dinna over 4 years ago

Thank you!!!