Grids

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


  

    
.column
    
.column
    
.column
    
.column
  

  

    
.column
    
.column column-50 column-offset-25
  



/* Every `.column` added inside a `.row` will automatically receive an equal amount of the available area. */

Column widths

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%
  

Examples

You can view more examples of using Milligram.

• Getting Started
• Typography
• Blockquotes
• Buttons
• Lists
• Forms
• Tables
• Grids
• Code
• Utilities
• Tips
• Browser Support
• Showcase

Contributing

Want to contribute? Follow these recommendations.