html - How do I adjust the grid gutter on MDL as that of foundation or bootstrap? -
how set gutter width of material design lite's grid system,
with mdl, 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>
screenshot of mdl vs foundation,
how fix gutter width zero?
have setup fiddle,
update:
after digging documentation, there exists class
mdl-cell--stretch
stretches cell vertically fill parent
that changes grid way, still not okay!
have opened issue on mdl's github, , got know that
adding class, mdl-grid--no-spacing
mdl-grid
fixes issue. skipped 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
Post a Comment