The Grid is a fluid system with a max width of
112.0rem (1120px), 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.
/* `.container` is main centered wrapper *//* Every `.column` added inside a `.row` will automatically receive an equal amount of the available area. */.column.column.column.column.column.column column-50 column-offset-25
The 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.
10%20%25%/* .column-33 or .column-34 both work for 1/3 column width */33%40%50%60%/* .column-66 or .column-67 both work for 2/3 column width */67%75%80%90%100%
You can view more examples of using Milligram.
Want to contribute? Follow these recommendations.
Subscribe to our newsletter
The latest news and resources sent straight to your inbox.