Material-components-web: Make layout grid nestable

[deap82]

Hi!
For some more advanced layout cases I'm having some serious problems using the mdc-layout-grid.

First of all, nesting doesn't work the same way as for example with bootstrap grid, due to the very imposed 16px gutter.
See example and my work-around in Codepen: http://codepen.io/deap82/pen/evqjEO

Secondly, as of Chrome 57 supporting css grids I ran into problems with some overrides I have to control top/bottom spacing separately on cells.
See example and my suggestion in Codepen: http://codepen.io/deap82/pen/LWwBjb

What are your thoughts on this? Is this outside the scope of MDC? Would my best bet be to use a grid system from some other css framework?

[talves]

I am also seeing layout issues with the grids.
Are there plans for the grid layouts to be compatible with IE 11 and Edge the same as chrome?

I have the same question as @deap82 , should we just plan on using a different grid system? Maybe just go back to MDL for the grids for now?

[yeelan0319]

Hey, @deap82

We would definitely like to cover the usage of nested mdc-layout-grid, that on our radar now!
For the second use case, mdc-layout-grid do impose a uniform gutter among all its elements based on the material design guideline. If you are willing to remove a specific gutter for your design purpose, you may add margin-top: -16px to that mdc-layout-grid__cell.

[deap82]

Ok @yeelan0319,
I managed to create a solution that works both for the display: flex and the display: grid case.

http://codepen.io/deap82/pen/dWYOjm?editors=1100

I'm still a bit hesitant though about having to maintain css for both these cases. I wouldn't mind a way to "disable" the use of display: grid (until it's more cross-browser).

Something like this in _mixins.scss of mdc-layout-grid:

$mdc-layout-grid-allow-css-grid: true !default;

/.../

@if($mdc-layout-grid-allow-css-grid) { /* this if goes around all "@supports (display: grid)" blocks */
    @supports (display: grid) {
        width: auto;      
        grid-column-end: span min($span, map-get($mdc-layout-grid-columns, $size));
    }
}

Or would you perhaps consider adding the --collapse-top, --collapse-bottom and --collapse-vertical modifiers from my codepen to the mdc framework, so that one don't need it in their own css?

[deap82]

Hi again @yeelan0319,
The negative margin solution isn't working well for cells where the visibility of the cell _content_ can change. See this codepen for example: https://codepen.io/deap82/pen/mmeWNq

This is yet another issue I'm encountering when the grid is rendered with display: grid instead of display: flex.

[im-n1]

Hey guys,

I just ran into this. I guess guys from MDC will solve this soon but for those who still struggle I have a simple solution which works on desktop and mobile.

You just simply nest grids into each other like

.mdc-layout-grid
    .mdc-layout-grid__cell
        p ...
    .mdc-layout-grid__cell
        .mdc-layout-grid
            .mdc-layout-grid__cell
                p ...
            .mdc-layout-grid__cell

.mdc-layout-grid .mdc-layout-grid
    padding: 0

[yeelan0319]

@deap82 @talves @grafa Thanks for all the contribution in this issue. We just landed a solution to make our layout grid nestable.

For the collapse option @deap82 suggested, mdc is trying to create a minimal library support material design guideline on the web. Since collapse is not one of the behavior that material guideline specified, we cannot support it but highly encourage you to put code to tailor the library to your usage.

[sivaraam]

It would be nice if the corresponding documentation was updated to reflect this change. People might be misled and might have difficulty finding why the examples in the documentation don't work out of the box.

[sivaraam]

Though the README file in the repo seems to be updated, the change isn't live, yet.

[yeelan0319]

Hi @sivaraam ,

Currently MDC web is doing bi-weekly release, so there will be chance that you see the changes merged in master branch but not yet being release via npm. And our demo site always reflect the latest changes on npm package.

[sivaraam]

@yeelan0319 Thanks for the info! The change seems to be live now.

[theenoahmason]

didnt want to open a new issue since this is relevant here, but nesting of grids has a serious hitch:

if the gutter is large enough, and the parent cell is small enough, the margin pushes the nested grid out of sync with its parent cell.

This is readily apparent on the demos, just look at the nested example and resize the screen, at several points in the resize, the nested grid overflows its parent cell.

I can confirm this issue with my current application.