Google MDL Very very basic question related to Grid

Hello, I am new and I am trying to learn Material Design Lite from:

In the “Tablet” and “Mobile” Viewports heading, It says that in Phone the columns should add to 4 but in the code the columns are adding to become 8.

Please help.

You can also see this image to better understand.

Thank you.

Hi @extrinima, that might appear confusing, yes :slight_smile:

If they added up to 4 (eg: mdl-cell--2-col-phone, mdl-cell--1-col-phone, mdl-cell--1-col-phone) then the columns would all spread out across one row of the mobile screen. However, in this example, the first two columns (mdl-cell--2-col-phone, mdl-cell--2-col-phone) will fill up the row, so the next column (mdl-cell--4-col-phone) will clear them and be pushed underneath:

Anyway, the point is that yes, mobile viewports will behave as though there’s space for four columns.

Hope that helps!

1 Like

Thank you Ian. Issue solved.