Milligram - Column Widths with Flexbox

HTML
<div class="container"> <div class="row"> <div class="column column-10"><span>10%</span></div> </div> <div class="row"> <div class="column column-20"><span>20%</span></div> </div> <div class="row"> <div class="column column-25"><span>25%</span></div> </div> <div class="row"> <!-- .column-33 or .column-34 both work for 1/3 column width --> <div class="column column-33"><span>33%</span></div> </div> <div class="row"> <div class="column column-40"><span>40%</span></div> </div> <div class="row"> <div class="column column-50"><span>50%</span></div> </div> <div class="row"> <div class="column column-60"><span>60%</span></div> </div> <div class="row"> <!-- .column-66 or .column-67 both work for 2/3 column width --> <div class="column column-67"><span>67%</span></div> </div> <div class="row"> <div class="column column-75"><span>75%</span></div> </div> <div class="row"> <div class="column column-80"><span>80%</span></div> </div> <div class="row"> <div class="column column-90"><span>90%</span></div> </div> <div class="row"> <div class="column"><span>100%</span></div> </div> </div>
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
/* Milligram's Grid System also supports specifying column widths as a ratio of the parent row's width. Append one of the percentages listed below to a `column-` class to achieve the desired layout. https://github.com/milligram/milligram https://milligram.github.io */
Expand for more options Login