FlexGrid

With FlexGrid you can create a flexible grid that can be used for a variety of layouts. It is based on CSS Flexbox.

It consists of two components:

• FlexGrid - the container for the grid
• FlexGridColumn - the item inside the grid

You can also use the column with the FlexGrid.Column alias.

Import

// Tree shakable import
import { FlexGrid, FlexGridColumn } from '@bojagi/pablo';
// Or direct import
import { FlexGrid, FlexGridColumn } from '@bojagi/pablo/FlexGrid';

Concept

The FlexGrid splits it's width into 12 columns. Inside the FlexGridColumn you can specify the size prop, that defines how many columns it should span. A column of 12 columns takes the whole width, a column of 6 columns takes half of the width. You can also set size="fillup" to make the column take the remaining space of the row.

Usage

Live Editor

function Component() {
  const columnStyleProps = { bgColor: 'brand.main', textColor: 'brand.contrastText', p: 2, display: 'flex', justifyContent: 'center', alignItems: 'center' };
  return (
    <FlexGrid width="100%">
      <FlexGrid.Column size={4} {...columnStyleProps}>
        <Paragraph>Size 4 (33%)</Paragraph>
      </FlexGrid.Column>
      <FlexGrid.Column size={8} {...columnStyleProps}>
        <Paragraph>Size 8 (66%)</Paragraph>
      </FlexGrid.Column>
    </FlexGrid>
  );
}

Result

Loading...

With the gap prop you can add space between the columns. The value uses the spacing multiplier of the theme. You can also define an tuple of two values to define the gap for the horizontal and vertical axis.

Responsive design

Like with any Box style props, you can use the size prop to define the column size for different screen sizes.

Live Editor

function Component() {
  const columnStyleProps = { bgColor: 'brand.main', textColor: 'brand.contrastText', p: 2, display: 'flex', justifyContent: 'center', alignItems: 'center' };
  return (
    <FlexGrid width="100%">
      <FlexGrid.Column size={{ _: 12, sm: 6 }} bgColor="brand.main" textColor="brand.contrastText" p={2}>
        <Paragraph>Size 12 on mobile, Size 6 on portrait tablet and higher</Paragraph>
      </FlexGrid.Column>
      <FlexGrid.Column size={{ _: 12, sm: 6 }}  bgColor="brand.main" textColor="brand.contrastText" p={2}>
        <Paragraph>Size 12 on mobile, Size 6 on portrait tablet and higher</Paragraph>
      </FlexGrid.Column>
    </FlexGrid>
  );
}

Result

Loading...

Multi row layout

If you create multiple columns that don't fit into one row, they will automatically wrap to the next row.

Live Editor

function Component() {
  const columnStyleProps = { bgColor: 'brand.main', textColor: 'brand.contrastText', p: 2, display: 'flex', justifyContent: 'center', alignItems: 'center' };
  return (
    <FlexGrid width="100%" gap={1}>
      <FlexGrid.Column size={8} {...columnStyleProps}>
        <Paragraph>Size 8 (66%)</Paragraph>
      </FlexGrid.Column>
      <FlexGrid.Column size={4} {...columnStyleProps}>
        <Paragraph>Size 4 (33%)</Paragraph>
      </FlexGrid.Column>
      <FlexGrid.Column size={4} {...columnStyleProps}>
        <Paragraph>Size 4 (33%)</Paragraph>
      </FlexGrid.Column>
      <FlexGrid.Column size={4} {...columnStyleProps}>
        <Paragraph>Size 4 (33%)</Paragraph>
      </FlexGrid.Column>
      <FlexGrid.Column size={4} {...columnStyleProps}>
        <Paragraph>Size 4 (33%)</Paragraph>
      </FlexGrid.Column>
    </FlexGrid>
  );
}

Result

Loading...

Custom styles

As the FlexGrid and the FlexGridColumn is based on the Box component, you can use all the style props that are available for the Box component (except for size).

Props

Name	Type	Default Value	Required	Description

Box props

Name	Type	Default Value	Required	Description

Name	Type	Default Value	Required	Description

Box props

Name	Type	Default Value	Required	Description