FlexGrid

Many layouts we build today are well-suited for the grid CSS property, e.g. lining things up into rows or columns with specified gap sizes. Unfortunately, there is limited support in Internet Explorer today, so it is not recommended to use for certain sets of customer applications.

FlexGrid aims to provide a grid-like component for these customer applications, using flexbox to lay equal-width items in a row, and wrapping as needed to form a grid. It also supports specifying row or column gaps that only appear between items, and can adapt columns or gaps responsively to different screen widths.

Note: FlexGrid must contain FlexGridItem components as children in order to get the desired behavior with widths and margins. Also note that these are both implemented using Block, and can take all the Block properties for styling.

It is possible to achieve unequal-width items using Block style overrides.

Also, keep in mind that the margins won’t be set properly unless you have the correct number of items in each row. In this example, we add a hidden element after the wide element so that the last item in the first row has a margin-right of zero.

Responsive Layouts

FlexGrid, like Block, accepts props as either a single value or an array of values. See Block for more details.

FlexGrid will add additional margin after the last element such that it always lines up with the row above, and avoids flexbox’s default nature of spreading out.

FlexGrid API

FlexGridItem API