Skip to content

Latest commit

 

History

History
92 lines (45 loc) · 2.11 KB

grid.md

File metadata and controls

92 lines (45 loc) · 2.11 KB

Grid

A flexible component that enables you to distribute content on a page and helps you to build consistent, balanced, and responsive layouts across your application.

Properties

className

Adds the specified classes to the root element of the component.

Type: String

Required: No

disableGutters

Determines whether horizontal and vertical gutters are hidden.

Type: Boolean

Default: false

Valid values: true | false

Required: No

gridDefinition

An array of element definitions that specifies how the columns must be arranged. Each element definition can have the following properties:

  • colspan (number | GridProps.BreakpointMapping) - The number (1-12) of grid elements for this column to span.
  • offset (number | GridProps.BreakpointMapping) - The number (0-11) of grid elements by which to offset the column.
  • pull (number | GridProps.BreakpointMapping) - The number (0-12) of grid elements by which to pull the column to the left.
  • push (number | GridProps.BreakpointMapping) - The number (0-12) of grid elements by which to push the column to the right.

The value for the each property can be a number (which applies for all breakpoints) or an object where the key is one of the supported breakpoints (xxs, xs, s, m, l, xl) or default. The value of this key is a number of columns, applied for that breakpoint and those above it. You must provide a default value for colspan.

We recommend that you don't use the pull and push properties of the element definition for accessibility reasons.

Type: ReadonlyArray<GridProps.ElementDefinition>

Default: []

Required: No

id

Adds the specified ID to the root element of the component.

Type: String

Required: No

Slots

children

The elements to align in the grid. You can provide any elements here. The number of elements should match the number of objects defined in the gridDefinition property.

License Summary

The documentation is made available under the Creative Commons Attribution-ShareAlike 4.0 International License. See the LICENSE file.