Grid

The Grid is a twelve-column, flexbox-based layout system built from Container, Row, and Col components. It provides a familiar row and column structure for building responsive designs.

Basic example

The Grid uses the Container, Row, and Col components to create responsive layouts. It is built with flexbox and adapts to different screen sizes.

Column

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridBasic() {
  return (
    <Container className="text-center">
      <Row>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
      </Row>
    </Container>
  );
}

Auto-layout columns

Breakpoint props allow easy sizing of columns without setting an explicit numbered span.

Equal-width

A Col without any props creates equal-width columns for every screen size.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridEqualWidth() {
  return (
    <Container className="text-center">
      <Row>
        <Col>1 of 2</Col>
        <Col>2 of 2</Col>
      </Row>
      <Row>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
      </Row>
    </Container>
  );
}

Variable width content

Setting a breakpoint prop to "auto" sizes the column based on the natural width of its content.

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridVariableWidth() {
  return (
    <Container className="text-center">
      <Row className="md:justify-center mb-3">
        <Col lg={2}>1 of 3</Col>
        <Col md="auto">Variable width content</Col>
        <Col lg={2}>3 of 3</Col>
      </Row>
      <Row>
        <Col>1 of 3</Col>
        <Col md="auto">Variable width content</Col>
        <Col lg={2}>3 of 3</Col>
      </Row>
    </Container>
  );
}

Responsive props

The xs, sm, md, lg, xl, and xxl props specify different column sizes for different screen sizes. Breakpoints are defined using minimum widths, meaning each one applies from that width upward. For example, md={4} applies to medium devices (tablets) and above, and renders the md:col-4 class.

All breakpoints

For grids that are the same across all breakpoints, plain Col and the xs prop are enough.

col

xs=8

xs=4

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridAllBreakpoints() {
  return (
    <Container className="text-center">
      <Row>
        <Col>col</Col>
        <Col>col</Col>
        <Col>col</Col>
        <Col>col</Col>
      </Row>
      <Row>
        <Col xs={8}>xs=8</Col>
        <Col xs={4}>xs=4</Col>
      </Row>
    </Container>
  );
}

Mix and match

Different breakpoint props can be combined on the same column for different screen sizes.

md=8

xs=6 md=4

xs=6

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridMixMatch() {
  return (
    <Container className="text-center">
      {/* Stack the columns on mobile by making one full-width and the other half-width */}
      <Row>
        <Col md={8}>md=8</Col>
        <Col xs={6} md={4}>
          xs=6 md=4
        </Col>
      </Row>

      {/* Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop */}
      <Row>
        <Col xs={6} md={4}>
          xs=6 md=4
        </Col>
        <Col xs={6} md={4}>
          xs=6 md=4
        </Col>
        <Col xs={6} md={4}>
          xs=6 md=4
        </Col>
      </Row>

      {/* Columns are always 50% wide, on mobile and desktop */}
      <Row>
        <Col xs={6}>xs=6</Col>
        <Col xs={6}>xs=6</Col>
      </Row>
    </Container>
  );
}

Row columns

Instead of sizing each column, the Row breakpoint props set the number of columns per row. The grid automatically lays out the columns evenly, and "auto" sizes them based on their content.

Column

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridRowCols() {
  return (
    <Container className="text-center">
      <Row xs={2}>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
      </Row>
    </Container>
  );
}

Column

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridRowColsAuto() {
  return (
    <Container className="text-center">
      <Row xs="auto">
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
      </Row>
    </Container>
  );
}

Column

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridRowColsResponsive() {
  return (
    <Container className="text-center">
      <Row xs={1} sm={2} md={4}>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
      </Row>
    </Container>
  );
}

Nesting

Nesting works by placing a new Row and set of Col components inside an existing Col. This gives more control over the layout of the content.

Level 1: sm=3

Level 2: xs=8 sm=6

Level 2: xs=4 sm=6

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridNesting() {
  return (
    <Container className="text-center">
      <Row>
        <Col sm={3}>Level 1: sm=3</Col>
        <Col sm={9}>
          <Row>
            <Col xs={8} sm={6}>
              Level 2: xs=8 sm=6
            </Col>
            <Col xs={4} sm={6}>
              Level 2: xs=4 sm=6
            </Col>
          </Row>
        </Col>
      </Row>
    </Container>
  );
}

Columns

Columns can be modified with options for alignment, ordering, and offsetting using the flexbox grid system.

Vertical alignment

The items-start, items-center, and items-end classes on Row control vertical alignment of all columns.

One of three columns

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridAlignVertical() {
  return (
    <Container className="text-center">
      <Row className="items-start">
        <Col>One of three columns</Col>
        <Col>One of three columns</Col>
        <Col>One of three columns</Col>
      </Row>
    </Container>
  );
}

The self-start, self-center, and self-end classes control vertical alignment of individual columns.

One of three columns

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridAlignSelf() {
  return (
    <Container className="text-center">
      <Row>
        <Col className="self-start">One of three columns</Col>
        <Col className="self-center">One of three columns</Col>
        <Col className="self-end">One of three columns</Col>
      </Row>
    </Container>
  );
}

Horizontal alignment

The justify-* classes on Row control horizontal alignment.

One of two columns

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridAlignHorizontal() {
  return (
    <Container className="text-center">
      <Row className="justify-start">
        <Col xs={4}>One of two columns</Col>
        <Col xs={4}>One of two columns</Col>
      </Row>
      <Row className="justify-center">
        <Col xs={4}>One of two columns</Col>
        <Col xs={4}>One of two columns</Col>
      </Row>
      <Row className="justify-end">
        <Col xs={4}>One of two columns</Col>
        <Col xs={4}>One of two columns</Col>
      </Row>
    </Container>
  );
}

Order classes

The order-{number} classes change the visual order of columns.

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridOrder() {
  return (
    <Container className="text-center">
      <Row>
        <Col>First in DOM, no order applied</Col>
        <Col className="order-5">Second in DOM, with a larger order</Col>
        <Col className="order-1">Third in DOM, with an order of 1</Col>
      </Row>
    </Container>
  );
}

Offsetting columns

The object form of a breakpoint prop moves columns to the right. For example, md={{ span: 4, offset: 4 }} renders the md:col-4 md:offset-4 classes, moving the column over four columns on medium screens and larger.

md=4

md={{ span: 4, offset: 4 }}

md={{ span: 3, offset: 3 }}

md={{ span: 6, offset: 3 }}

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridOffset() {
  return (
    <Container className="text-center">
      <Row>
        <Col md={4}>md=4</Col>
        <Col md={{ span: 4, offset: 4 }}>{"md={{ span: 4, offset: 4 }}"}</Col>
      </Row>
      <Row>
        <Col md={{ span: 3, offset: 3 }}>{"md={{ span: 3, offset: 3 }}"}</Col>
        <Col md={{ span: 3, offset: 3 }}>{"md={{ span: 3, offset: 3 }}"}</Col>
      </Row>
      <Row>
        <Col md={{ span: 6, offset: 3 }}>{"md={{ span: 6, offset: 3 }}"}</Col>
      </Row>
    </Container>
  );
}

Gutters

Gutters are the spacing between columns, used to create consistent spacing and alignment in the grid system. Hummingbird supports gutter utilities up to g-24 (6rem), applied to Row through the className prop.

Horizontal gutters

The gx-{size} classes set horizontal gutters between columns.

Custom column padding

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridGuttersHorizontal() {
  return (
    <Container className="text-center overflow-hidden">
      <Row className="gx-12">
        <Col>
          <div>Custom column padding</div>
        </Col>
        <Col>
          <div>Custom column padding</div>
        </Col>
      </Row>
    </Container>
  );
}

Vertical gutters

The gy-{size} classes set vertical gutters between rows.

Custom column padding

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridGuttersVertical() {
  return (
    <Container className="text-center">
      <Row className="gy-12">
        <Col xs={6}>
          <div>Custom column padding</div>
        </Col>
        <Col xs={6}>
          <div>Custom column padding</div>
        </Col>
        <Col xs={6}>
          <div>Custom column padding</div>
        </Col>
        <Col xs={6}>
          <div>Custom column padding</div>
        </Col>
      </Row>
    </Container>
  );
}

Horizontal & vertical gutters

The g-{size} classes set both horizontal and vertical gutters.

Custom column padding

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridGutters() {
  return (
    <Container className="text-center">
      <Row className="g-3">
        <Col xs={6}>
          <div>Custom column padding</div>
        </Col>
        <Col xs={6}>
          <div>Custom column padding</div>
        </Col>
        <Col xs={6}>
          <div>Custom column padding</div>
        </Col>
        <Col xs={6}>
          <div>Custom column padding</div>
        </Col>
      </Row>
    </Container>
  );
}

Row columns gutters

Gutter classes can be combined with the Row breakpoint props to create gutters between rows and columns.

Row column

tsx

import { Container, Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridRowColsGutters() {
  return (
    <Container className="text-center">
      <Row xs={2} lg={3} className="g-3">
        <Col>
          <div>Row column</div>
        </Col>
        <Col>
          <div>Row column</div>
        </Col>
        <Col>
          <div>Row column</div>
        </Col>
        <Col>
          <div>Row column</div>
        </Col>
        <Col>
          <div>Row column</div>
        </Col>
        <Col>
          <div>Row column</div>
        </Col>
      </Row>
    </Container>
  );
}

No gutters

The g-0 class removes all gutters between rows and columns.

xs=6 md=8

xs=6 md=4

tsx

import { Row, Col } from "@hummingbirdui/react/layout/grid";

export default function GridNoGutters() {
  return (
    <Row className="g-0 text-center">
      <Col xs={6} md={8}>
        xs=6 md=8
      </Col>
      <Col xs={6} md={4}>
        xs=6 md=4
      </Col>
    </Row>
  );
}

API Reference

The grid components are available from @hummingbirdui/react or the @hummingbirdui/react/layout/grid subpath. All three render a <div> and accept standard div attributes.

Row

Prop	Type	Default
`xs, sm, md, lg, xl, xxl`	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| "auto"`	—
`className`	`string`	—

Col

Prop	Type	Default
`xs, sm, md, lg, xl, xxl`	`number (1–12) \| "auto" \| true \| { span, offset }`	—
`className`	`string`	—

CSS variables

The Grid uses CSS variables for easy customization. Override these variables in the CSS to change the grid's behavior.

--grid-gutter-x: 1.5rem;
--grid-gutter-y: 0px;
--grid-columns: 12;
--grid-row-columns: 6;

Styling

Hummingbird React grid components are styled entirely through Hummingbird's grid classes and CSS variables. See the Hummingbird Grid documentation for the full class reference.

PreviousContainer NextText