Как настроить желоб сетки на MDL как на фундаменте или в начальной загрузке?

Открыли проблему на GitHub MDL и узнали, что

Добавление класса mdl-grid--no-spacing к mdl-grid устраняет проблему. Поскольку это как-то упущено из документации.

<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>

обновлена ​​скрипта

«Желоб» сделан полями (насколько я вижу, 8 пикселей), поэтому вы можете просто обнулить margin.

Если вы сделаете это, вам придется сбросить ширину.

.mdl-cell {
    margin: 0;
}

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

демонстрация JSfiddle

Очевидно, требуется дополнительное расследование.

Если вы хотите только уменьшить желоб до «0», это должно сработать:

.mdl-cell { margin:0; }   

Но также есть функция calc для .mdl-cell--1-col, которая учитывает эту маржу:

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

Поэтому, если вы хотите растянуть все mdl-cells по всей ширине родителя, вам нужно сбросить его, чтобы игнорировать вычет 16px, что оставляет вам:

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

EDIT:
CSS Material Design Lite содержит специальный класс только для этой цели и называется mdl-grid--no-spacing. Чтобы использовать его, его необходимо добавить к родительскому элементу mdl-grid следующим образом:

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>    

Это выполняет работу в режиме MDL. Этот JSFiddle иллюстрирует это.

Я добавил цикл sass, чтобы добавить модификатор в mdl-grid, чтобы я мог использовать класс mdl-grid--gutter-16 в своей разметке, и ширина и поля ячеек будут корректироваться соответствующим образом.

(Я добавил только несколько параметров желоба в переменную $mdl-grid-gutter sass: 0, 16, 20 и 24. Просто добавьте в эту переменную любые значения желоба, которые вам нравятся)

САСС:

$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));
        }
      }
    }
  }
}

Разметка:

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

Надеюсь это поможет.