PlusGrid

A simple 12 columns grid layout based on flexbox.

g-container

Lorem ipsum dolor sit amet consectetur adipisicing elit.

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
                
                <div class="g-container">
                    <div class="g-row">
                        <div class="g-col-1">col-1</div>
                        <div class="g-col-1">col-1</div>
                        <div class="g-col-1">col-1</div>
                        <div class="g-col-1">col-1</div>
                        <div class="g-col-1">col-1</div>
                        <div class="g-col-1">col-1</div>
                        <div class="g-col-1">col-1</div>
                        <div class="g-col-1">col-1</div>
                        <div class="g-col-1">col-1</div>
                        <div class="g-col-1">col-1</div>
                        <div class="g-col-1">col-1</div>
                        <div class="g-col-1">col-1</div>
                    </div>
                </div>
                
            

g-container-fluid

Lorem ipsum dolor sit amet consectetur adipisicing elit.

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
                
                <div class="g-container-fluid">
                    <div class="g-row">
                        .....
                    </div>
                </div>
                
            

g-no-gutter

Lorem ipsum dolor sit amet consectetur adipisicing elit.

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
                
                <div class="g-container g-no-gutter">
                    <div class="g-row">
                        <div class="g-col-1"> ..... </div>
                        .....
                    </div>
                </div>
                
            

Lorem ipsum dolor sit amet consectetur adipisicing elit.

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
                
                <div class="g-container">
                    <div class="g-row g-no-gutter">
                        <div class="g-col-1"> ..... </div>
                        .....
                    </div>
                </div>
                
            

g-no-gutter-x and g-no-gutter-y

g-col-offset

Lorem ipsum dolor sit amet consectetur adipisicing elit.

g-col-offset-11 g-col-1
g-col-offset-10 g-col-2
g-col-offset-9 g-col-3
g-col-offset-8 g-col-4
g-col-offset-7 g-col-5
g-col-offset-6 g-col-6
g-col-offset-5 g-col-7
g-col-offset-4 g-col-8
g-col-offset-3 g-col-9
g-col-offset-2 g-col-10
g-col-offset-1 g-col-11
g-col-2
g-col-offset-3 g-col-2
g-col-offset-3 g-col-2

g-col-pull

Lorem ipsum dolor sit amet consectetur adipisicing elit.

g-col-1 g-col-pull-11
g-col-2 g-col-pull-10
g-col-3 g-col-pull-9
g-col-4 g-col-pull-8
g-col-5 g-col-pull-7
g-col-6 g-col-pull-6
g-col-7 g-col-pull-5
g-col-8 g-col-pull-4
g-col-9 g-col-pull-3
g-col-10 g-col-pull-2
g-col-11 g-col-pull-1

Lorem ipsum dolor sit amet consectetur adipisicing elit.

g-col-offset-5 g-col-2 g-col-pull-5

align-center

Lorem ipsum dolor sit amet consectetur adipisicing elit.

col-1
col-1
col-1
col-1
col-5

Responsive

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Screen Size Min Width Prefix
Extra small 576px .g-col-xs-
Small 768px .g-col-sm-
Medium 992px .g-col-md-
Large 1200px .g-col-lg-
Extra large 1400px .g-col-xl-