A simple 12 columns grid layout based on flexbox.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<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>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<div class="g-container-fluid">
<div class="g-row">
.....
</div>
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<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.
<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
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
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- |