A simple CSS flexbox grid system

Flexbox grid system guideline. style.css contains all CSS code for the grid system. Media query set to @media (max-width: 768px)

Full div

Full - #1
<div class="row"> <div class="col"> <div class="demostyle">Full - #1</div> </div> </div>

Use row on parent div and use col on child divs

1/2 - #1
1/2 - #2
<div class="row"> <div class="col"> <div class="demostyle">1/2 - #1</div> </div> <div class="col"> <div class="demostyle">1/2 - #2</div> </div> </div>

Wrap 100% div around

1/2 - #1
1/2 - #2
<div class="row-bg-demo"> <!-- Background color or image --> <div class="row container"> <div class="col"> <div class="demostyle">1/2 - #1</div> </div> <div class="col"> <div class="demostyle">1/2 - #2</div> </div> </div> </div>

Use container on parent div for boxed layout

1/3 - #1
1/3 - #2
1/3 - #3
<div class="row container"> <div class="col"> <div class="demostyle">1/3 - #1</div> </div> <div class="col"> <div class="demostyle">1/3 - #2</div> </div> <div class="col"> <div class="demostyle">1/3 - #3</div> </div> </div>

Example of 5 columns in a row

1/5 - #1
1/5 - #2
1/5 - #3
1/5 - #4
1/5 - #5
<div class="row container"> <div class="col"> <div class="demostyle">1/5 - #1</div> </div> <div class="col"> <div class="demostyle">1/5 - #2</div> </div> <div class="col"> <div class="demostyle">1/5 - #3</div> </div> <div class="col"> <div class="demostyle">1/5 - #4</div> </div> <div class="col"> <div class="demostyle">1/5 - #5</div> </div> </div>

Custom grid auto with col--30 (33.3333% width)

Auto - #1
33.3333% - #2
<div class="row container"> <div class="col"> <div class="demostyle">Auto - #1</div> </div> <div class="col col--30"> <div class="demostyle">33.3333% - #2</div> </div> </div>

Example with text auto and col--30

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel dui eleifend, volutpat odio id, maximus risus. Quisque dapibus vulputate orci, eget feugiat lectus interdum a. Cras et nibh mauris. Maecenas efficitur felis orci, a egestas magna maximus sit amet. Curabitur eu urna dictum, dictum massa nec, maximus mauris. Aenean feugiat, odio id varius faucibus, est mi rutrum sapien, vitae pulvinar arcu neque at mi. Curabitur blandit odio id est varius dapibus. Donec vitae purus ultricies, cursus purus ac, aliquam orci. Phasellus faucibus risus eu magna sodales lacinia. Sed vitae ultrices enim.
Donec venenatis purus tellus, ac viverra sapien malesuada vitae. Donec venenatis rhoncus augue in dapibus. Integer aliquam efficitur dolor ac molestie. Vestibulum sit amet congue urna, et ultrices metus. Etiam vel lectus nibh. Aliquam erat volutpat. Curabitur tristique erat eu leo sollicitudin, at faucibus ex sollicitudin. Proin pellentesque dictum neque, nec sagittis quam blandit vitae. Pellentesque et fringilla nibh, in tristique turpis. In tempus felis vel turpis euismod, id pulvinar ligula euismod. Vivamus efficitur risus nec malesuada sollicitudin. In id ante quis est aliquet rutrum. Nunc augue risus, sodales a malesuada viverra, consequat ornare sem. Aenean interdum eleifend ultrices. Vestibulum molestie, ipsum sit amet varius posuere, orci nunc sagittis augue, sit amet ultrices felis ligula vel odio. Etiam commodo varius massa at mollis.
<div class="row container"> <div class="col"> <div class="demostyle"> text...... </div> </div> <div class="col col--30"> <div class="demostyle"> text...... </div> </div> </div>

Smaller container container--small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel dui eleifend, volutpat odio id, maximus risus. Quisque dapibus vulputate orci, eget feugiat lectus interdum a. Cras et nibh mauris. Maecenas efficitur felis orci, a egestas magna maximus sit amet. Curabitur eu urna dictum, dictum massa nec, maximus mauris. Aenean feugiat, odio id varius faucibus, est mi rutrum sapien, vitae pulvinar arcu neque at mi. Curabitur blandit odio id est varius dapibus. Donec vitae purus ultricies, cursus purus ac, aliquam orci. Phasellus faucibus risus eu magna sodales lacinia. Sed vitae ultrices enim.
<div class="row container container--small"> <div class="col"> <div class="demostyle"> text...... </div> </div> </div>

More info

You can do a lot more with flexbox. Please visit this page for more information.
This guideline will be updated as we develop and test the layout.