Grids

.a-grid

Overview

Description

Grids allow you to display many pieces of related information closely together. Grids work well when displaying content housed within panels, or when placing related images next to text elements.

Best Practices

Avoid mixing unrelated content within a single grid layout, i.e. don’t place unrelated blog and product content together.
Content within a grid should be of the same organizational hierarchy. For example, placing individual credit cards within a grid works, but placing the parent checking account product page alongside individual checking products does not.

Schema

Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	-	`any`
grid.modifier_classes	Specifies modifier classes. All class names should follow the ABEM methodology.	`string`	-	`any`
grid.type	There are two grid types, `block` and `column`. Block grids provide a way to evenly split grid items within the grid by a maximum number defined by grid.max_items. Column grids split two or three items into variable column widths defined by grid.col_widths.	`string`	`block`	`block` `column`
grid.max_items	Used only by the `block` grid.type. It determines the maximum number of grid items per row.	`string`	`3`	`2` `3` `4` `5`
grid.col_widths	Used only by the `column` grid.type. It determines the column widths for each grid item per row.	`string`	-	`50-50` `75-25` `25-75` `66-33` `33-33-33` `50-25-25` `25-50-25` `25-25-50`
grid.gutter	Determines the space between grid items. Default values: `sm`: 10px, `md`: 20px, `lg`: 40px	`string`	`md`	`sm` `md` `lg`
grid.items	Grid items can consist of multiple types of content such as editor text, images, videos, etc.. For column grid types, the number of grid items must match the number of columns.	`object`	-	`any`