How do I adjust the grid gutter on MDL as that of foundation or bootstrap?

Question

How to set the gutter width of the Material Design Lite's grid system,

with mdl, The basic grid.

<div class="demo-grid-ruler mdl-grid container">
  <div class="mdl-cell mdl-cell--1-col fl-10">1</div>
  <div class="mdl-cell mdl-cell--1-col fl-11">2</div>
  <div class="mdl-cell mdl-cell--1-col fl-12">3</div>
  <div class="mdl-cell mdl-cell--1-col fl-13">4</div>
  <div class="mdl-cell mdl-cell--1-col fl-14">5</div>
  <div class="mdl-cell mdl-cell--1-col fl-15">6</div>
  <div class="mdl-cell mdl-cell--1-col fl-16">7</div>
  <div class="mdl-cell mdl-cell--1-col fl-17">8</div>
  <div class="mdl-cell mdl-cell--1-col fl-18">9</div>
  <div class="mdl-cell mdl-cell--1-col fl-19">10</div>
  <div class="mdl-cell mdl-cell--1-col fl-20">11</div>
  <div class="mdl-cell mdl-cell--1-col fl-9">12</div>
</div>

This is the screenshot of mdl vs foundation,

how do I fix the gutter width to zero?

have setup a fiddle,

Update:

after digging the documentation, there exists a class

mdl-cell--stretch

Stretches the cell vertically to fill the parent

that changes the grid this way, but still not okay!

Answer 1

Have opened an issue on MDL's GitHub , and got to know that

Adding the class, mdl-grid--no-spacing to the mdl-grid fixes the issue. As it is skipped from the documentation somehow.

<div class="demo-grid-ruler mdl-grid container mdl-grid--no-spacing">
  <div class="mdl-cell--stretch mdl-cell--1-col fl-10">1</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-11">2</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-12">3</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-13">4</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-14">5</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-15">6</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-16">7</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-17">8</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-18">9</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-19">10</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-20">11</div>
  <div class="mdl-cell--stretch mdl-cell--1-col fl-9">12</div>
</div>

updated fiddle

Answer 2

If you only want to reduce the gutter to "0", this should do the job:

.mdl-cell { margin:0; }   

But also, there is a calc function on .mdl-cell--1-col which takes that margin into account:

.mdl-cell--1-col {
  width: calc(8.33333% - 16px);
}   

So if you want to stretch all mdl-cells throughout entire width of a parent, you need to reset it to ignore 16px deduction, which leaves you with:

.mdl-cell--1-col {
  width: 8.33333%;
}   

EDIT:
Material Design Lite's CSS contains a dedicated class for that purpose only, and is named mdl-grid--no-spacing . In order of using it, this need to be added to parent element mdl-grid , as so:

div class="demo-grid-ruler mdl-grid mdl-grid--no-spacing container">
  <div class="mdl-cell mdl-cell--1-col fl-10">1</div>
  <div class="mdl-cell mdl-cell--1-col fl-11">2</div>
  <div class="mdl-cell mdl-cell--1-col fl-12">3</div>
  <div class="mdl-cell mdl-cell--1-col fl-13">4</div>
  <div class="mdl-cell mdl-cell--1-col fl-14">5</div>
  <div class="mdl-cell mdl-cell--1-col fl-15">6</div>
  <div class="mdl-cell mdl-cell--1-col fl-16">7</div>
  <div class="mdl-cell mdl-cell--1-col fl-17">8</div>
  <div class="mdl-cell mdl-cell--1-col fl-18">9</div>
  <div class="mdl-cell mdl-cell--1-col fl-19">10</div>
  <div class="mdl-cell mdl-cell--1-col fl-20">11</div>
  <div class="mdl-cell mdl-cell--1-col fl-9">12</div>
</div>    

This does the job in MDL way.This JSFiddle illustrates it.

Answer 3

The 'gutter's is made by margins (8px as far as I can see) so you can just zero out the margin .

If you do that though you would have to reset the widths.

.mdl-cell {
    margin: 0;
}

.mdl-cell--1-col {
    width: 8.33333%;
}

JSfiddle Demo

Obviously extra investigation is required.

Answer 4

I added a sass loop to add a modifier to the mdl-grid so that I could use the class mdl-grid--gutter-16 in my markup and the cell widths and margins will adjust accordingly.

(I only added a few gutter options to $mdl-grid-gutter sass variable; 0, 16, 20, and 24. simply add which ever gutter values you like to that variable)

SASS:

$mdl-grid-gutter: 0 16 20 24;
$mdl-grid-columns: 12;

@each $space in $mdl-grid-gutter {
  .mdl-grid--gutter-#{$space} {
    padding:0px;
    > .mdl-cell {
      margin:#{$space}px;
      width:calc(33.3333333333% - (#{$space}px * 2));
      @for $i from 1 through $mdl-grid-columns {
        &.mdl-cell--#{$i}-col {
          width:calc(100%/(12/#{$i}) - (#{$space}px * 2));
        }
      }
    }
  }
}

Markup:

 <div class="mdl-grid mdl-grid--gutter-0">
   <div class="mdl-cell mdl-cell--6-col">...</div>
 </div>

Hope this helps.