section#grid h2 Grid p The starting point to maintaining the document flow is by wrapping the content in a container element that defaults to #[code max-width: 960px]. :markdown ```

My Website

My content.

``` p The following responsive breakpoints are defined in the variables file: :markdown ``` $breakpoint-smartphone ?= 480px $breakpoint-mid-mobile ?= 600px $breakpoint-tablet ?= 768px $breakpoint-desktop ?= 900px $breakpoint-desktop-wide ?= 1200px ``` p Grid is built on top of flexbox. Cells (grid-flex-cell) will have the width of 100% below 481px and automatically calculated width (depending on cell count) above that breakpoint. Grid must be placed within div with container class as described above. p There are several different ways to implement the grid: h4 Regular column widths, automatically-calculated p The default use of grid is to wrap each row in a separate container div. A row consists of a set of .grid-flex-cell divs wrapped in a .grid-flex-container div. For example, if you place 2 .grid-flex-cell divs within a .grid-flex-container div, it will automatically size 2 columns of equal width. This eliminates the need for any helper classes. .grid-flex-container .grid-flex-cell p auto .grid-flex-cell p auto .grid-flex-container .grid-flex-cell p auto .grid-flex-cell p auto .grid-flex-cell p auto .grid-flex-container .grid-flex-cell p auto .grid-flex-cell p auto .grid-flex-cell p auto .grid-flex-cell p auto :markdown ```html

auto

``` h4 Multiple rows within a single container div p If you'd like to place multiple rows within a single .grid-flex-container div, you will need to make use of helper classes which explicitly define the fractional width of each column. These helper classes are .grid-flex-cell-1of2, .grid-flex-cell-1of3, and .grid-flex-cell-1of4. .grid-flex-container .grid-flex-cell-1of2 p 1/2 .grid-flex-cell-1of2 p 1/2 .grid-flex-cell-1of3 p 1/3 .grid-flex-cell-1of3 p 1/3 .grid-flex-cell-1of3 p 1/3 .grid-flex-cell-1of4 p 1/4 .grid-flex-cell-1of4 p 1/4 .grid-flex-cell-1of4 p 1/4 .grid-flex-cell-1of4 p 1/4 :markdown ```html

1/2

1/3

1/4

``` h4 Irregular column widths p The automatically-calculated column widths can be used in conjuction with the helper classes (.grid-flex-cell-1of2, .grid-flex-cell-1of3, and .grid-flex-cell-1of4) to enable a layout with irregular column widths. .grid-flex-container .grid-flex-cell p auto .grid-flex-cell.grid-flex-cell-1of4 p 1/4 .grid-flex-cell p auto .grid-flex-container .grid-flex-cell p auto .grid-flex-cell p auto .grid-flex-cell.grid-flex-cell-1of2 p 1/2 .grid-flex-cell p auto .grid-flex-container .grid-flex-cell.grid-flex-cell-1of3 p 1/3 .grid-flex-cell p auto :markdown ```html

auto

1/4

auto

1/2

auto

1/3

auto

``` h4 Centering columns p In cases where you are not using the full width of a column and would like to center the element inside of it use the helper class (.grid-flex-cell-centered). .grid-flex-container .grid-flex-cell-1of3.grid-flex-cell-centered p 1/3, centered .grid-flex-container .grid-flex-cell.grid-flex-cell-1of3.grid-flex-cell-centered p 1/3, centered .grid-flex-cell.grid-flex-cell-1of3.grid-flex-cell-centered p 1/3, centered :markdown ```html

1/3, centered

``` p For simple, one-column layout use only container element. :markdown ```html

...

```