Milligram - Grids with Flexbox

HTML
<!-- .container is main centered wrapper --> <div class="container"> <div class="row"> <div class="column"><span>.column</span></div> <div class="column"><span>.column</span></div> <div class="column"><span>.column</span></div> <div class="column"><span>.column</span></div> </div> <div class="row"> <div class="column"><span>.column</span></div> <div class="column column-50 column-offset-25"><span>.column column-50.column-offset-25</span></div> </div> </div> <!-- Every .column added inside a .row will automatically receive an equal amount of the available area. -->
CSS
/* Define the width of the container */ .container { max-width: 1440px; } /* Here you can view the space block */ span { background: #ccc; border-radius: 2px; display: block; margin-bottom: 20px; text-align: center; }
JAVASCRIPT
/* The Grid is a fluid system with a max width of `112.0rem` (1200px), that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. Milligram is different than most because of its use of the **CSS Flexible Box Layout Module standard**. The advantage is the simplicity, and we know that a functional code is very important for maintainability and scalability. Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There is no restriction on number of columns, but we advise you to follow a design pattern of grid system. See more tips on best practices in the tips - http://milligram.github.io/tips.html. https://github.com/milligram/milligram https://milligram.github.io */
Expand for more options Login