Home Material design layout grid more than 12 colum
Reply: 1

Material design layout grid more than 12 colum

Gabriel Guarnieri Cardoso
Gabriel Guarnieri Cardoso Published in 2018-02-12 20:40:18Z

I'm trying to create a grid to which has one column per day of the month. So I need up to 32 columns in a single row (1st label + days of the month)

I'm using a for in order to add divs dynamically.

    <div class="mdc-layout-grid">
        <div class="mdc-layout-grid__inner">
                <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1">
                for (var i = 1; i <= Model.TotalDays; i++)
                    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1">@Model.GetDateStringFromDay(i)</div>

This gives me 12 values per row, as MDC is 12 column based. I tried to create nested divs, but it ended up adding new lines for every new level.

Is there a way to do it? Using nested columns or overriding somehow the default MDC behaviour to allow more columns in a single row?

Rustem Gareev
Rustem Gareev Reply to 2018-02-13 07:03:45Z

If you're using Sass, it's possible to override the number of columns on Layout Grid with Sass variables:

$mdc-layout-grid-columns: (
  desktop: 12,
  tablet: 8,
  phone: 4

But this will be applied to all MDC-Web Layout Grids in your markup.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.546794 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO