Grid

Grid provides a responsive CSS grid layout with configurable column counts and gap spacing.

Installation

npm install @libretexts/davis-react

Basic Usage

import { Grid } from '@libretexts/davis-react';

export default function Example() {
  return (
    <Grid cols={3} gap="md">
      <div>Column 1</div>
      <div>Column 2</div>
      <div>Column 3</div>
    </Grid>
  );
}

When to use

• Grid — Use for two-dimensional layouts with multiple columns. Ideal for card grids, dashboard layouts, and form layouts with side-by-side fields.
• Stack — Use for single-axis layouts where items are arranged in a row or column.