0

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>

enter image description here 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

enter image description here

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

Community
  • 1
  • 1

3 Answers3

1

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.

alicia16
  • 11
  • 1
0

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.

robjez
  • 3,740
  • 3
  • 32
  • 36
  • the same effect as the update, adding class `mdl-cell--stretch` –  Jul 22 '15 at 15:09
  • Ah - you didn't mention that initially. Adding `.mdl-cell--1-col {width:8.33333%;}` as @Paulie_D points out, does the job. – robjez Jul 22 '15 at 15:12
0

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.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • this works. waiting if there exists a mdl class that does this. accept in two days. –  Jul 22 '15 at 15:12