My Favorite React Layout Components Using Flexbox And CSS Grid

There are a few components that I use almost every day in development. They are used for layouts and are made from flexbox and CSS grid. On this site, I pass both of these down with the MdxProvider so all my pages and posts have access to them easily.

Flexbox

This one is by far my favorite. 90% of the time it works perfectly with the props given. It can easily be extended through styled components, emotion's css prop, or Theme UI's sx prop for those few cases where I need something extra.

This is an opinionated way to build a Flexbox component. The idea is to have booleans for certain aspects of the spec to help speed up a composition.

Here's a list of the current props for it:

type FlexboxProps = {
  className?: string;
  children?: React.ReactNode;

  inline?: boolean;
  vertical?: boolean; // column
  wrap?: boolean;
  noGrow?: boolean; // acts as no-grow and no-shrink
  grow?: number;
  shrink?: number;
  basis?: number | "auto";

  top?: boolean;
  middle?: boolean;
  bottom?: boolean;
  left?: boolean;
  center?: boolean;
  right?: boolean;
  between?: boolean;
  around?: boolean;
  gap?: boolean | number; // add margin between children similar to grid-gap on grid
}

Here is some example usage. See the CodeSandbox down below for more.

<Flexbox vertical gap={3}>
  <Flexbox noGrow>
    <h1>A Title for You</h1>
  </Flexbox>
  <Flexbox bottom>
    <p>This is some copy to show how the box will fill the whole area but the text will be aligned bottom.</p>
  </Flexbox>
</Flexbox>

Grid

Grid is another one of my favorites and it's also very opinionated to suit my needs. The idea is to use CSS grid to create layouts. Depending on the project it can align with a design grid.

This can be paired with Flexbox for some powerful layouts. Add the sx prop from Theme UI for some wonderful breakpoint awesomeness.

Let's take a look at the props.

type GridProps = {
  className?: string;
  children: React.ReactNode;
  gap?: string | number;        // grid-gap
  columns?: string | string[];  // grid-template-columns
  rows?: string | string[];     // grid-template-rows
}

Here's an example of using it. See more examples in the CodeSandbox.

<Grid columns="1fr 1fr" gap="2">
  <img src="myImage.png" />
  <img src='catsSinging.png' />
</Grid>

Examples

I had used a column component that accepted different span amounts but I ended up not using it as much. I tend to add span to the children through the sx prop or extending with styled components.

I would love to here about other layout components that people use/have built to make composing faster and easier. Please let me know if you have any that you like. Thanks!