Как отрегулировать решетку сетки на MDL, как на фундамент или бутстрап?

Question

Как установить ширину желоба системы сетки материалов Lite,

с mdl, Базовая сетка.

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

Это скриншот лея против основания,

как это исправить ширину желоба к нулю?

имеют настроить fiddle,

Обновление:

после рытья документации, существует класс

mdl-cell--stretch

растягивания ячейки по вертикали, чтобы заполнить родителя

, который меняет сетку таким образом, но все еще не в порядке!

Answer 1

открыли вопрос о MDL's GitHub, и стало известно, что

Добавление класса, 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> 

обновленного fiddle

Answer 2

Если вы хотите, чтобы уменьшить переплет на «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>  

Это делает работу в леях way.This JSFiddle иллюстрирует это.

Answer 3

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

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

.mdl-cell { 
    margin: 0; 
} 

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

JSfiddle Demo

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

Answer 4

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

(я только добавил несколько вариантов переплета к переменному $ Sass лея-сеточный желоб; 0, 16, 20 и 24. Просто добавьте, которые когда-либо водосток значения, которые вы хотели бы это переменный)

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> 

Надеется, что это помогает.