Material-components-web: Responsive UI grid missing

[fballiano]

I can't find any documentation or component about using the responsive UI grid explained here:
https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-grid
with material-components-web. Am I missing something or it's not implemented yet or maybe there's no documentation about it?

Thanks!

[traviskaufman]

It's not implemented yet; see https://github.com/material-components/material-components-web/issues/47

[andriytyurnikov]

@traviskaufman , are you sure that Grid List Component is a proper replacements for UI Grids?
Here is a quote:

A grid list is best suited to presenting homogenous data

Well, UI grids are quite different beast usually

[sgomes]

Thanks, @andriytyurnikov, they do seem like different things.

Reopening issue, as this seems to be referring to a standard 12 column layout grid, like mdl-grid in MDL. The MD spec offers some responsive UI guidance, and even specifies a 12-column grid.

We need to determine if building a 12-column layout grid is in or out of scope for MDC-Web. Leaving this issue for discussion during bug triage.

[andriytyurnikov]

Hello @sgomes I've probably should've mentioned you explicitly, given your experience with mdl-grid, to be honest I was quite shocked to see that you guys didn't started with container elements, but what do I know (;
As a side note - lack of containers is what stops me from becoming early adopter of material-components-web, and I have to stick with mdl

[sgomes]

Thanks for the info, @andriytyurnikov! What other containers would you need, specifically, besides a layout grid?

[andriytyurnikov]

@sgomes , I understand that every team has own design process, but we are from the tribe that starts with layout.

We had experience with mdl, lightning-design-system, semantic-ui, bootstrap, foundation.

Usually first layout choice is a full height vs fixed height vs height: auto (and responsive options for those) - here we have to do a lot of custom coding, as full-height and vertical alignment is rarely addressed by frameworks (must be difficult for some reason) :(

then goes choice of fixed/fluid width (again with responsive options) - here almost every framework delivers mature tools.

While one may argue that layouts/grid should be addressed in a separate scope, I would say that this particular functionality is quite significant part of css toolset.
Another note - if set of containers implies some kind of container hierarchy it would be nice to explicitly express that in documentation.

When vertical size and alignment containers and modifiers do exist, but poorly documented or too complex to understand (semantic-ui, zurb-foundation, lightning-design-system) --
then frontend guys lean towards customizing bootstrap, which at least is simple to understand.

P.S. BTW - I wonder what would be a right place to start a discussion about non-adjustable size of elements and top position of navbar, if such place exist (:

[sgomes]

@fballiano As an update to this, we've discussed it internally, and we will be building this component following the layout grid guidelines in the Material Design spec. We haven't prioritised it yet, so depending on how that goes it may be a while before we're able to work on it, but we'll get to it at some point :)

Opening a separate issue to track progress.

[sgomes]

Opened as #170

[ronnieroyston]

I'm thinking a workaround is Skeleton's basic grid. http://getskeleton.com/ ? Anyone else have an idear? I gotta have a grid to proceed.

[traviskaufman]

@rhroyston FWIW our layout-grid will be on npm this Monday!

[jkepps]

Is there an option to create a fixed grid? It seems the layout grid is fluid by default and there is no explicit documentation on how to change that.

https://material.io/design/layout/responsive-layout-grid.html#grid-behavior

The second section in the documentation above gives information about a fixed grid which would be quite useful. Am I missing something in this project that would allow for this sort of behavior?