CODEWITHSUNDEEP
zurb-foundation
RallyCat
RallyCat

Reputation: 13

How to adjust gap between columns in foundation framework?

I use Foundation framework and I want to reduce the gap between columns. Which part in foundation.css I should change to reduce gap between that 3 columns?

html code:

<div class="row">
    <div class="medium-10 columns" >
            <div class="row">
                    <div class="medium-4 columns">
                    </div>
                    <div class="medium-4 columns">
                    </div>
                    <div class="medium-4 columns">
                    </div>
            </div>
    </div>
    <div class="medium-2 columns" >
            <div class="row">
                    <div class="medium-6 columns">
                    </div>
                    <div class="medium-6 columns">
                    </div>
            </div>
    </div>

</div>

hi Daniel,thanks but how about if I want adjust in specific columns? example: in 1 row, I have 2 columns, 1 column have 2 columns and the others column have 4 columns. i only want adjust the gap in this 2nd column that have 4 columns

Upvotes: 1

Views: 1038

Answers (1)

user753676
user753676

Reputation:

you have to change the paddings of the columns like this:

@media print, screen and (min-width: 40em) {
  .column, .columns {
      padding-right: 10px;
      padding-left: 10px;
  }
}

This overwrites the following default values:

    padding-right: .9375rem;
    padding-left: .9375rem;

See https://codepen.io/DanielRuf/pen/RvoYrr

Is is generated from the gutter mixin in https://github.com/zurb/foundation-sites/blob/4abaf7ad3c508bf3fc73cb5dfd8928f756968c7d/scss/grid/_gutter.scss#L16

I have created another example with two classes pr10 and pl10 for adding padding to the right columns.

You can do the same on the row leel too.

https://codepen.io/DanielRuf/pen/QYGPKO

@media print, screen and (min-width: 40em) {
  .pl10 {
      padding-left: 10px;
      background: green;
  }
  .pr10 {
      padding-right: 10px;
      background: green;
  }
}

<div class="row">
    <div class="medium-10 columns" >
            <div class="row">
                    <div class="medium-4 columns">1
                    </div>
                    <div class="medium-4 columns">2
                    </div>
                    <div class="medium-4 columns">3
                    </div>
            </div>
    </div>
    <div class="medium-2 columns" >
            <div class="row">
                    <div class="medium-6 columns pl10 pr10">4
                    </div>
                    <div class="medium-6 columns pl10 pr10">5
                    </div>
            </div>
    </div>
</div>

(The pr10 and pl10 is a shorthand version that is often used in CSS frameworks with utility classes like Tachyons and tailwindcss).

Or you can target the right columns with the following CSS:

@media print, screen and (min-width: 40em) {
  .row > .medium-10.columns + .medium-2.columns > .row > .medium-6.columns {
      padding-left: 10px;
      padding-right: 10px;
      background: green;
  }
}

See https://codepen.io/DanielRuf/pen/gqgbNG

Upvotes: 1

Related Questions