x0x x0x - 3 months ago 32
CSS Question

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

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!

x0x x0x
Answer

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

Comments