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.
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.
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:
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.
The justifyItems property sets the alignment of all Grid items along the row axis.
The justifyContent property sets the alignment of the entire Grid within its container along the row axis.
The alignItems property sets the alignment of all Grid items along the column axis.
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>.
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.
The justifySelf property sets the alignment of a single grid item along the row axis.
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.
|Breakpoint||Value||Value in pixels|