Material design light. Grid system unexpected behavior

css twitter-bootstrap material-design-lite grid-system

185 просмотра

2 ответа

First of all a picture:

enter image description here

This is a screen from I can not understand this behavior. I've sad, that i want exactly 3 column in a row with width of each one equals to 1/3 of row width. But in some screen resolutions width of column equals to half of row width. This comes from css instructions based on media queries and seems it's by design.

So my question is, can i prevent this behavior? If not, what is the reason of that behavior.

P.S. I have come from bootstrap and i didn't have this issue with it.

Автор: user3272018 Источник Размещён: 08.11.2019 11:32

Ответы (2)

1 плюс


There's no way to achieve what you described out of the box way, if you insist on having 3 columns in mobile you must override the class as suggested by @JyotiPathania.

Remember Material Design Lite grid system is totally different from Bootstrap. Bootstrap has a fixed 12 columns and scaled down for all viewports. In contrast, Material Design Lite has 12 for desktop, 8 for tablets and 4 for mobile. As such, a .mdl-cell--4-col will take 1/3 of the screen on desktop, 1/2 of tablet and whole screen for mobile.

My suggestion is to avoid thinking in Bootstrap and overriding default MDL class, try to embrace the framework design decision. Otherwise, you'll be better off using a custom Bootstrap MDL theme.

Автор: nqngo Размещён: 02.10.2016 01:20

0 плюса

Yes you can prevent this issue by overriding the mdl styles just add a custom class "custom-width":


<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col custom-width">4</div>
  <div class="mdl-cell mdl-cell--4-col custom-width">4</div>
  <div class="mdl-cell mdl-cell--4-col custom-width">4</div>


.custom-width {
    width: calc(33.3333% - 16px) !important;

and answer to your second question is because of mdl behave according to current viewport size:


.mdl-cell--4-col, .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
    width: calc(33.3333% - 16px);


.mdl-cell--4-col, .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
    width: calc(50% - 16px);


.mdl-cell--4-col, .mdl-cell--4-col-mobile.mdl-cell--4-col-mobile {
    width: calc(100% - 16px);

Hope this might help you. For more info read documentation mdl grid

Автор: Jyoti Pathania Размещён: 20.08.2016 10:40
Вопросы из категории :