deprecated
Forma 36 version 3 is not supported anymoreClick here to go to version 4
Forma 36

Grid

StorybookGithub
alpha

CSS Grid based React component, comes with predefined values to ensure design consistency, and ease of use.

Table of contents

How to use Grid

The Grid consists of two components:

  • Grid: Used as a container for GridItems
  • GridItem: Elements within the Grid

## Code examples

columns

When defined as a number, it will split the space into equally sized columns; it also accepts any of the grid-template-columns css properties. e.g.

rows

Accepts a number or any of grid-template-rows css properties.

columnGap & rowGap

columnGap represents space between columns, rowGap represents the space between rows, both accepts one of spacing token names.

spacing2Xs | spacingXs | spacingXs | spacingS | spacingM | spacingL | spacingXl | spacing2Xl | spacing3Xl | spacing4Xl

e.g.


Grid Components

The grid layout consists of different components that helps defining your layout in two dimensional aspects, these components are:

Grid container: The main element that controls the layout structure, columns, rows, and the gap between them

Grid item: The children of the grid container.

Grid columns: The vertical container for children elements within the grid layout

Grid rows: The horizontal container for elements within the grid layout

Grid area: A space consists of columns and rows within the grid, and is controlled by the child element itself

Column gap: The space between vertical containers which corresponds to one of our spacing values

Row gap: The space between horizontal containers which also corresponds to one of our spacing values

Grid of boxes describing how the grid components (Grid Item, Column Gap, Row Gap, Grid Area) works.


Basic usage


Repeat notation

repeat() is a css notation that you can use with the gridColumns and girdRows properties to make your rules more concise and easier to understand when creating a large amount of columns or rows

Example: gridColumns={'1fr 2fr 1fr 2fr 1fr 2fr'} is same as gridColumns={'repeat(3, 1fr 2fr)'} see below.


FR unit

Fr is a fractional unit and 1fr is for 1 part of the available space. it differs from percentage unit because it distributes available space.

If you place a larger item into a track then the way the fr until will work is to allow that track to take up more space and distribute what is left over.


Span keyword

Span keyword works on grid items with the gridArea property, use span to avoid specifying the end lines for a column or a row.

i.e. instead of specifying columnStart and columnEnd you can use span to make the grid item take 4 columns


Content alignment

Just like flexbox the grid comes with justifyContent, justifyItems, alignItems, alignContent, ..etc.


Grid vs. Flexbox

The main difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layouts in one dimension - either a row or a column. Grid was designed for two-dimensional layout rows, and columns.

One dimensional columns without rows describing the use flexbox, and two dimensional grid describes how the grid works


Accessibility

According to WCAG C27 technique, the dom order must match the visual order.

The grid can re-order it's content in various ways through the order css property on grid items, this changes the visual order but the dom order stays the same, hence, keyboard navigation and focus order maybe affected.

Set the correct order of the elements with tabindex attribute to avoid accessibility issues.