Scroll to Top

Layouts

You can now use the layout of your own choice from three expanded layouts which have very short and addictive code. These three layouts are very different from each other in many ways. When you would use them you will get the idea and you could utilize the best one that suits you.

SITEMAP Documentation / Css / Layouts

Screen is divided into 12 Columns and use of 12 column is made easy. These Grids are controllable and mobile responsive.

Demo

Follow these steps to create 12 column grid layout

1. Create Row.

2. define columns inside the row.

col m2 s8 l2

col m2 s4 l2

col m2 s6 l2

col m2 s6 l2

col m2 s6 l2

col m2 s6 l2

col m1 l1 s12

col m9 l9 s6

col m2 l2 s6

col m4 s8 l4

col m8 s4 l8

col m6 s6 l6

col m2 s6 l2

col m4 s6 l4

col m7 l7 s6

col m5 l5 s12

Code copy

<div class="row">
                <div class="col m6 l6 s12">
                    <!-- YOUR CONTENT HERE -->
                </div>
                <div class="col m3 l3 s6">
                    <!-- YOUR CONTENT HERE -->
                </div>
                <div class="col m3 l3 s6">
                    <!-- YOUR CONTENT HERE -->
                </div>
            </div>

This grid is very useful in making interactive web products. It is used with the typical type of items.

Demo

Use masonary to declare that you are using masonry grid layout If You want Three Elements on the medium screen write col-m-3 with row, for small devides use col-s-3 & for large: col-l-3

Code copy

    <div class="row masonary col-s-1 col-m-3 col-l-4">
        <img src="1.jpg" class="img img-responsive">
        <img src="2.jpg" class="img img-responsive">
        <img src="3.jpg" class="img img-responsive">
        <img src="4.jpg" class="img img-responsive">
        <img src="5.jpg" class="img img-responsive">
        <img src="6.jpg" class="img img-responsive">
    </div>

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.

Demo

Detailed Information about flex grid layout is given at official w3 website. To Learn about this layout system, please visit w3 at https://www.w3.org/TR/css-flexbox-1/

Flex Grid Layout System

Code copy

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

Feedback