one world brand image
Grid system

x2 Grid with an 8px base unit

View on GitHub and Figma.

Token taxonomy

ow.grid.cl.value.row.value.gutter.value.margin*.value

  • .ow system name.

  • .grid the grid component.

  • cl: value the number of collumns and its widths: 1fr per collumn by default then customise exact value per collumn, ex: 1fr240px equals 2 collumns of 1fr and 240px each. Values per collumn can vary: px, fr, %, vw, rem, while the number of columns start at 1 and expand to 16 columns max.

  • row: value set to auto row numbers and row heights by default. Values per collumn can vary: px, fr, %, vw, rem

  • gutter: value the amount of space between the grid component columns: tight, condensed, dense. Values can vary: px, vw, rem.

  • margin: value the amount of space left and right of the grid component: wide, narrow. Values can vary: px, %, vw, rem
    * Use grid margins sparigly, instead, assign margins to grid's parent container.

Tokens and variables

Gutters

Gutter is the space between the grid columns.

  • Default

    ow.grid

    Default 16fr column grid with 32px gutter.

    Show css Hide css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }

  • Tight

    ow.grid.tight

    Tight 16fr collumn grid with 16px gutter.

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--tight {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
    }

  • Condensed

    ow.grid.condensed

    Condensed 16fr collumn grid with 8px gutter.

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--condensed {
     grid-column-gap: 8px;
     grid-row-gap: 8px;
    }

  • Dense

    ow.grid.dense

    Dense 16fr collumn grid with 1px gutter.

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--dense {
     grid-column-gap: 1px;
     grid-row-gap: 1px;
    }

Margins

Margins are the space left and right of the grid component.

  • Default

    ow.grid

    Default 16fr collumn grid with 32px gutter and 0px margins.

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }

  • Wide

    ow.grid.wide

    16fr collumn grid with 32px gutter and 32px margins.

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--wide {
     margin-right: 32px;
     margin-left: 32px;
    }

  • Narrow

    ow.grid.narrow

    16fr collumn grid with 32px gutter and 16px margins.

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--narrow {
     margin-right: 16px;
     margin-left: 16px;
    }

Columns

The amount of collumns of the grid component. For fluid grids use Fr units. The FR unit represents a fraction of the available space in the grid. You use it to define the length of rows and columns just like a percentage or pixel unit, but, unlike fixed percentages or pixel units, the FR unit automatically calculates row and column space while adjusting for gaps.

  • ow.grid

    Default 16fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }
  • ow.grid.cl2

    2fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl2 {
     grid-template-columns: 1fr 1fr;
    }
  • ow.grid.cl4

    4fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl4 {
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid.ow-grid--cl4:tiny {
     grid-template-columns: 1fr 1fr;
    }
  • ow.grid.cl8

    8fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl8 {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid.ow-grid--cl8:small {
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid.ow-grid--cl8:tiny {
     grid-template-columns: 1fr 1fr;
    }

Columns combinations - fluid

Collumns combination

  • ow.grid.cl1fr15fr

    1fr - 15fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl1fr15fr {
     grid-template-columns: 1fr 15fr;
    }
  • ow.grid.cl2fr14fr

    2fr - 14fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl2fr14fr {
     grid-template-columns: 2fr 14fr;
    }
  • ow.grid.cl3fr13fr

    3fr - 13fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl3fr13fr {
     grid-template-columns: 3fr 13fr;
    }
  • ow.grid.cl4fr12fr

    4fr - 12fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl4fr12fr {
     grid-template-columns: 4fr 12fr;
    }
  • ow.grid.cl5fr11fr

    5fr - 11fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl5fr11fr {
     grid-template-columns: 5fr 11fr;
    }
  • ow.grid.cl6fr10fr

    6fr - 10fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl6fr10fr {
     grid-template-columns: 6fr 10fr;
    }
  • ow.grid.cl7fr9fr

    7fr - 9fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl7fr9fr {
     grid-template-columns: 7fr 9fr;
    }
  • ow.grid.cl2

    2fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl2 {
     grid-template-columns: 1fr 1fr;
    }
  • ow.grid.cl9fr7fr

    9fr - 7fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl9fr7fr {
     grid-template-columns: 9fr 7fr;
    }
  • ow.grid.cl10fr6fr

    10fr - 6fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl10fr6fr {
     grid-template-columns: 10fr 6fr;
    }
  • ow.grid.cl11fr5fr

    11fr - 5fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl11fr5fr {
     grid-template-columns: 11fr 5fr;
    }
  • ow.grid.cl12fr4fr

    12fr - 4fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-g.ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl12fr4fr {
     grid-template-columns: 12fr 4fr;
    }ap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl11fr5fr {
     grid-template-columns: 11fr 5fr;
    }
  • ow.grid.cl13fr3fr

    13fr - 3fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl13fr3fr {
     grid-template-columns: 13fr 3fr;
    }
  • ow.grid.cl14fr2fr

    14fr - 2fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl14fr2fr {
     grid-template-columns: 14fr 2fr;
    }
  • ow.grid.cl15fr1fr

    15fr - 1fr collumn grid

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl15fr1fr {
     grid-template-columns: 15fr 1fr;
    }

Rows

You can assign height to the grid's rows but best practice suggests that the row inherits its height from its contents. You can also add the specific number of rows rather than auto. Use row height to create ratio based grids.

  • Row numbers

    A default 2 rows grid (row heights inherit from the grid cell - row content)

    ow.grid.row2

    A default 2 rows grid with auto row height

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--row2 {
     grid-template-rows: auto auto;
    }

  • Row heights

    ow.grid.row2x120x200px

    A default 2 rows grid with 120px and 200px rows height.

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--row2x120x200px {
     grid-template-rows: 120px 200px;
    }

Grid types

There are 3 types of grid, the fluid grid - default, the fixed grid and the hybrid grid. The value of the width of the collumn defines the type of grid:

  • Fixed

    Fixed collumn widths

    ow.grid.cl224px440px

    Fixed, all columns set in px

    Show css
    .ow-g.ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--224px440px {
     display: grid;
     grid-template-columns: 224px 440px;
    }rid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--row2x120x200px {
     grid-template-rows: 120px 200px;
    }

  • Hybrid

    Fixed and fluid collumn widths

    ow.grid.cl224px1fr

    Hybrid, columns set in px and fr

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--224px1fr {
     grid-template-columns: 224px 1fr;
    }

  • Fluid

    Fluid collumn widths.

    ow.grid.cl2

    Fluid - default, all columns set in fr

    Show css
    .ow-grid {
     display: grid;
     grid-auto-columns: 1fr;
     grid-column-gap: 32px;
     grid-row-gap: 32px;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-rows: auto;
    }.ow-grid:medium {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }.ow-grid:small {
     grid-column-gap: 16px;
     grid-row-gap: 16px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
    }.ow-grid:tiny {
     grid-template-columns: 1fr 1fr;
    }.ow-grid.ow-grid--cl2 {
     grid-template-columns: 1fr 1fr;
    }

Grid Areas

Main
Dialogue

Grid Areas are predefined grid layouts. Please note that the Nav-bar is fluid, while the Side-bar overlaps.

Principles

2x Grid

1 col
2 col
4 col
8 col
16 col
x1
x2
x4

Multiples or divisions of the x2 Grid compose the dimensions of columns, rows, boxes, along with their margins and padding.

Fixed Base unit

8
16
24
32
48
64
80
96

The base unit of 2x Grid geometry is the 8-pixel square base unit. Multiples or divisions of base units compose the dimensions of columns, rows, boxes, along with their margins and padding.

Fluid Base unit

fluid

The grid layout is by default set to fluid base units

Sizing

px
rem
basic unit
8px
0.5
1x
16px
1
2x
24px
1.5
3x
32px
2
4x
48px
3
6x
64px
4
8x
80px
5
10x

Pre defined scaling units on 8px base unit

Ratio

80px base
1:1
2:1
2:3
3:2
4:3
16:9

Pre defined ratio analogies

Baseline grid

Baseline grid uses the 8px base unit to align everything on a vertical rhythm.

Component grid

+
button
field
Notification title on first line
Secondary message for the notification if applicable
-

Components can be sized like other boxes: either fixed (8px base) or fluid, and often hybrid, with fixed height and fluid width.

Breakpoints

Device
Breakpoint
px
Columns
Gutter
mobile
tiny
478 and down
2fr
16px
mobile horizontal
small
767 and down
4fr
32px
tablet
medium
991 and down
8fr
32px
desktop
normal
992 and up
16fr
32px
l desktop
large
1280 and up
16fr
32px
xl desktop
huge
1440 and up
16fr
32px
xxl desktop
massive
1920 and up
16fr
32px

Use the above scale to assign responsive breakpoints to the grid component. See Figma.

Accessibility

Grid layout gives authors great powers of rearrangement over the document. However, these are not a substitute for correct ordering of the document source. The order property and grid placement do not affect ordering in non-visual media (such as speech). Likewise, rearranging grid items visually does not affect the default traversal order of sequential navigation modes such as cycling through links.