Grid

The Grid component organizes the layout of your application in a 2-dimensional grid format. Grids are structured similarly to Flex layouts, with containers and items, though Flex layouts are designed for 1-dimensional control. Containers wrap items, and items can also be containers. This relationship builds the structure of the layout. The Grid component is heavily based upon CSS Grid and the prop values of the component are directly derived from the CSS properties ofCSS Grid.

Columns and rows

The rows and cols properties define how to construct the Grid. Each can take a string of row or column sizes, separated by spaces. These values may be percentages or literal values, as well as some special units that assist in constructing the layout. For instance, auto will fill whatever remaining space there may be in a particular row or column, whereas the fr unit sets a fraction of the remaining space, calculated after all literal values are set. If a subset of your rows or columns will be identical in size, you can utilize the repeat function to size the particular number of rows or columns in shorthand.

In addition to column and row sizes, the rows and cols properties are also capable of receiving arbitrary names for each line separating the rows and columns. These names should be wrapped in [square brackets] and can then be referenced as boundaries when defining an item's start or end.

Areas

By default, the Grid container will position Grid items in consecutive order. In the above example each row consisted of 3 columns, so every 3 consecutive Grid items were grouped in the same row together.

The areas property allows you to designate areas within the grid. These areas can then be referenced by Grid items to determine their position. If an area spans multiple rows or columns, simply repeat the area name so that there is a 1:1 mapping of areas to rows and columns. The syntax for the areas property is a string of strings where an inset string is a list of column areas and the inset string itself represents a row. The dot notation allows for empty content in that area.

The below example uses the same Grid layout as the example above, but it is now sectioned into areas.

Template

The template property is a shorthand notation for the cols, rows, and areas properties. The notation is '<rows> / <cols>'. The same example from above could then be re-written as the example below:

Gaps

The rowGap and colGap properties take a multiplier that sets the gaps between rows and columns relative to the base spacing value in the Theme.

The multiplier value passed to gap is forwarded to both rowGap and colGap. This property is overwritten by rowGap and colGap if they are provided.

Justify items

The justifyItems property sets the alignment of all Grid items along the row axis.

Justify content

The justifyContent property sets the alignment of the entire Grid within its container along the row axis.

Align items

The alignItems property sets the alignment of all Grid items along the column axis.

Align content

The alignContent property sets the alignment of the entire Grid within its container along the column axis.

Start and end

The colStart, rowStart, colEnd, and rowEnd properties determine a Grid item's location within its container. The notation for these props could be a number or a name indicating which row or column to start or end at. If the value is a name, it should match the arbitrary name assigned to a row or column in the container rows or cols props.

The value for these properties could also be auto, which would simply place the Grid item in its natural location. If an item is intended to take up more space than its initial area, you can specify how many rows or columns that item should fill by using span in correlation with a number of rows or columns to span across. You can also use span with a name and that Grid item will span until it reaches the first row or column with that name.

For a shorthand notation, you can use the rowStartEnd and colStartEnd properties. These props control both the start and end locations of a Grid item. The notation is <start> / <end>.

Area

Use the area property on a Grid item only when its container is utilizing the areas property or the template property with areas defined within the template. The item area should correlate to an area defined in the container so that it can be placed properly within the Grid. See the Areas section for more details and an implementation example.

Justify self

The justifySelf property sets the alignment of a single grid item along the row axis.

Align self

The alignSelf property sets the alignment of a single grid item along the column axis.

The Grid component is built to handle responsive design out-of-the-box. There are a set of breakpoint properties, one for each breakpoint represented below. For each breakpoint, you can override any of the properties of a container or item in order to control the behavior of the layout across various screen sizes. Try adjusting the screen size to visualize this feature.

BreakpointValueValue in pixels
xs0em0px
sm31.25em500px
md62.5em1000px
lg93.75em1500px
xl125em2000px