960px. less/components/GridSystem.less provides all column widths, which are documented below, for most use cases.Each row of columns is wrapped within a GridRow. This keeps them organized and prevents a mosaic effect from occuring. GridRow has no defined properties but instead has a state rule for ::after, which sets its display property value to block, its clear property value to both, and its content property value to "". Having this rule in place allows every instance of GridRow to fully contain any elements within it that may be floating.
GridRow also updates any children img nodes to be responsive by setting their max-width property value to 100% and their height property value to auto.
To use it, give a div node a class of GridRow and place your content inside. A GridRow must go within a Block.
The purpose of the GridContainer is to contain a pages content within a set width. This prevents a pages content from spanning 100% of the viewport. Viewports that have a minimum width of 1024px have the GridContainer width property value set to 960px. Viewports smaller than this have the GridContainer width property value set to 100%. A GridContainer has a margin property value of 0 auto. Like the GridRow, a GridContainer has a state rule for ::after, which sets its display property value to block, its clear property value to both, and its content property value to "". Having this rule in place allows every instance of GridRow to fully contain any elements within it that may be floating.
To use it, give a div node a class of GridContainer and place your content inside. A GridContainer must go within a GridRow.
Our grid contains 12 columns. Columns break up content into vertical groups. Depending on the design we're trying to build, depends on the arrangement of the widths of each column. Each GridRow must contain column widths that equate to 12. For example:
We've chosen to be super descriptive with our column nomenclature. To use a single column, give a div node a class of OneColumn followed by either the --medium or --large modifier. Columns larger than a single column use *Columns, i.e. ThreeColumns, EightColumns, etc.
Any column with a --large modifier will determine how many columns that node will use on a viewport with a width greater than or equal to 1024px.
Any column with a --medium modifier will determine how many columns that node will use on a viewport with a width less than 1024px.