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
*/
1 Response