What does a component need to do to play well with the grid?

over 7 years ago by Aaron

What does a component or anything that is going to be in the grid system need to do to play well with the grid? Is the expectation just that anything inside that wants to size accordingly should just be width 100%, or is the thinking that components need to contain a grid themselves?

about 7 years ago by Oscar BartraAdmin

You can just wrap them with the asGrid HOC. That will set the width as a % based on the size parameter. It also sets flex-flow: 'row wrap' (see here).

Implementation-wise you have several options. I've played with the following 4 cases here https://codesandbox.io/s/ox4896ljq9

Wrapping each styleguide export in a Grid component by using the asGrid HOC gymnast export
Manually wrapping the styleguide component with a Grid or Col components when using them
Adding a display: block element within a Grid and that has other Grids as siblings. Here it behaves similar to when a Grid element is of size="fit", where we are off Grid (it depends on the width of the custom element)

These cases seem to work well. The last (4th case) is where you will have more issues.

If you place a Grid element within a regular div you cannot use any alignment properties unless the parent has display: flex. Note that other properties (like size) will continue to work.

﻿