Grid

Create a fixed number of equally-sized columns

CSS class

If you don't want to introduce an extra element in your DOM structure, or need a custom screen width breakpoint, or any other advanced usage you can use the .bfl-grid css class (which this component is based on) instead.

Also see <AutoCol> for automatic responsive columns based on column width.

Basic grid

Using <Grid> without any props gives you a single full width column with its children laid out vertically with a 12px gap by default. The children can be any element and becomes "css grid items".

<Grid>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Grid>
<Grid>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</Grid>

Non-responsive columns

You can control the number of columns with the cols prop.

Note that this applies to all screen sizes, often you want to keep it single column for mobile screens and only add more columns for larger screens. Scroll down for responsive demos.

<Grid cols={3}>
<Grid cols={3}>

Responsive layout

Most layouts work best when there is a dynamic number of columns based on screen width, which you can configure through a prop corresponding to each breakpoint:

For the following examples, resize your window to see what happens for smaller viewport widths.

One column default, three for 600px+ (small)

<Grid small={3}>
<Grid small={3}>

Two columns default, four for 960px+ (medium)

<Grid cols={2} medium={4}>
<Grid cols={2} medium={4}>

Span multiple columns

To create a container that spans multiple columns use the <Grid.Span> sub-component, which accepts the same breakpoint props as <Grid> (small, medium, large etc)

Span two columns (non-responsive)

<Grid cols={3}>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Grid.Span cols={2} className="bfc-base-3-bg bf-padding">
    This content spans two (of three total) columns.
  </Grid.Span>
</Grid>
<Grid cols={3}>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Grid.Span cols={2} className="bfc-base-3-bg bf-padding">
    This content spans two (of three total) columns.
  </Grid.Span>
</Grid>

Span two columns for 600px+ screens, and four at 960px+

Since the default value for cols is 1, both will be displayed full width for smallest (mobile) screens.

<Grid small={3} medium={5}>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Grid.Span small={2} medium={4} className="bfc-base-3-bg bf-padding">
    This content spans two (of three total) columns for 600px+ screens and four
    (of five total) for 960px+, but is full width by default for mobile.
  </Grid.Span>
</Grid>
<Grid small={3} medium={5}>
  <div className="bfc-base-3-bg bf-padding">Element</div>
  <Grid.Span small={2} medium={4} className="bfc-base-3-bg bf-padding">
    This content spans two (of three total) columns for 600px+ screens and four
    (of five total) for 960px+, but is full width by default for mobile.
  </Grid.Span>
</Grid>

Custom gap (spacing)

The gap prop accepts any css length as a string (including css variables, default value is 'var(--bfs12)') or a number (in px), and will apply both vertical and horizontal spacing between elements.

<Grid gap='4px'>
<Grid gap='4px'>

Sandbox

import Grid from "@intility/bifrost-react/Grid";

export default function () {
  return (
    <>
      <p>always 3 columns (non-responsive)</p>
      <Grid cols={3}>
        <div className="bfc-base-3-bg bf-padding">Element</div>
        <div className="bfc-base-3-bg bf-padding">Element</div>
        <div className="bfc-base-3-bg bf-padding">Element</div>
      </Grid>

      <p>One column up to 600px (small), three for wider</p>
      <Grid small={3}>
        <div className="bfc-base-3-bg bf-padding">Element</div>
        <div className="bfc-base-3-bg bf-padding">Element</div>
        <div className="bfc-base-3-bg bf-padding">Element</div>
      </Grid>

      <p>Two columns up to 960px (medium), four for wider</p>
      <Grid cols={2} medium={4}>
        <div className="bfc-base-3-bg bf-padding">Element</div>
        <div className="bfc-base-3-bg bf-padding">Element</div>
        <div className="bfc-base-3-bg bf-padding">Element</div>
        <div className="bfc-base-3-bg bf-padding">Element</div>
      </Grid>

      <p>Span two columns for 600px+ screens, and four at 960px+</p>
      <Grid small={3} medium={5}>
        <div className="bfc-base-3-bg bf-padding">Element</div>
        <Grid.Span small={2} medium={4} className="bfc-base-3-bg bf-padding">
          This content spans two (of three total) columns for 600px+ screens and
          four (of five total) for 960px+, but is full width by default for
          mobile.
        </Grid.Span>
      </Grid>

      <p>4px gap</p>
      <Grid gap={4} small={2}>
        <div className="bfc-base-3-bg bf-padding">4 (number)</div>
        <div className="bfc-base-3-bg bf-padding">
          equivalent to '4px' (css length string)
        </div>
      </Grid>
    </>
  );
}