Scroll to Top

Flex Grid

Flex Grid layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts. Most importantly, the flex box layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.). The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow. Material Grammi have implemented three layout systems, giving users the ability to use them all in one project as well as use any of them in their projects.

SITEMAP Documentation / Css / Layouts / Flex Grid


Detailed Information about flex grid layout is given at official w3 website. To Learn about this layout system, please visit w3 at

Flex Grid Layout System

Code copy

    <div class='row flex stack-top'>
        <div class='col m2 s12 l4'>
                Flex Grid Layout System


Developed By Egrammi Studios