Consider using CSS Grid for Materialize Grid

Dogfalo / materialize

Materialize, a CSS Framework based on Material Design

https://materializecss.com

MIT License

38.86k stars 4.74k forks source link

Consider using CSS Grid for Materialize Grid #6282

Open Praveen-Rai opened 5 years ago

Praveen-Rai commented 5 years ago

The CSS Grid Layout provides a flexible way for defining grid layouts. The specification can be found at CSS Grid Layout Module Level 1.

Along with Custom CSS Properties ( and may be HTML Web Components ) we can have a much more sophisticated grid system and a much cleaner resulting HTML. Secondly, customization would be lot easier.

I just created a small snippet to demonstrate the idea. Please refer https://codepen.io/praveen-rai/pen/KJWoqw

felipebraga commented 5 years ago

What do you mean about table?

Materialize is currently using a CSS Grid System.

Praveen-Rai commented 5 years ago

@felipebraga This line made me to think that Materialize uses Table. Looking into the developer panel i figured out that it uses float and calculated width to achieve the grid layout ( Will correct the question title ). Either way it's not using CSS Grid layout, which is much more flexible.

FYI .. Please refer the attached screenshots below of Materialize Grid.

materializegrid_row materializegrid_col

felipebraga commented 5 years ago

Oh, I get it.

Thanks for elaborate your question.

Praveen-Rai commented 5 years ago

FYI .. Material Components for Web uses CSS Grid and Custom properties ... https://material.io/develop/web/components/layout-grid/