AutoCol

Dynamically create as many columns as the container will fit (based on a minimum colum width).

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 bf-autocol css class (which this component is based on) instead.

Also see <Grid> for when you want a specific number of columns.

Basic usage

By default <AutoCol> will render as many 300px wide columns that can fit, stretched to fill its container width, with a 12px gap.

<AutoCol>
  <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>
  <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>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</AutoCol>
<AutoCol>
  <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>
  <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>
  <div className="bfc-base-3-bg bf-padding">Element</div>
</AutoCol>

Custom column width and gap

Set a column size with width and spacing with gap. Both support numbers (in px), or CSS length strings.

Number

<AutoCol width={200} gap={4}>
  ...
</AutoCol>
<AutoCol width={200} gap={4}>
  ...
</AutoCol>

CSS string

Also see spacing guide.

<AutoCol width="15rem" gap="var(--bfs8)">
  ...
</AutoCol>
<AutoCol width="15rem" gap="var(--bfs8)">
  ...
</AutoCol>

Sandbox

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

export default function () {
  return (
    <AutoCol>
      <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>
      <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>
      <div className="bfc-base-3-bg bf-padding">Element</div>
    </AutoCol>
  );
}