Grid

Import

import { Grid } from '@envsemble/envui';

Usage

Grid lays out its children in columns, one by default, with gap between rows and columns, a step of the spacing scale, none by default.

align lines each child up in its cell's height: stretch, the default, fills the row, and start, center and end keep it at its own height.
Like Box, it takes render, name, container and padding.

ProjectCards.tsx

import { Card, Grid } from '@envsemble/envui';

const projects = [
  { name: 'Website refresh', owner: 'Priya Shah', description: 'New pages for the spring launch.' },
  { name: 'Quarterly report', owner: 'Sam Lee', description: 'Figures for the last three months.' },
  {
    name: 'Onboarding guide',
    owner: 'Alex Morgan',
    description: 'The first week for new members.',
  },
  { name: 'Data migration', owner: 'Sam Lee', description: 'Moving the archive to the new store.' },
];

export default function ProjectCards() {
  return (
    // As many columns as fit, each at least 14 rem wide; one column in a narrow container.
    <Grid columns={{ min: '14rem' }} gap={4}>
      {projects.map((project) => (
        <Card
          key={project.name}
          title={project.name}
          meta={project.owner}
          description={project.description}
        />
      ))}
    </Grid>
  );
}

Columns

Columns	Lays out
`columns={{ min: '14rem' }}`	As many equal columns as fit at 14 rem; one when narrow.
`columns={3}`	Three equal columns at every width.
`columns="minmax(0, 2fr) minmax(0, 1fr)"`	A `grid-template-columns` template, such as a main column.

With a minimum, the grid fits as many equal columns as it can at that width or wider, with empty columns where items run out, so it needs no container query.
In a template, write minmax(0, 1fr) rather than 1fr, so long content wraps.

<Grid columns="minmax(0, 2fr) minmax(0, 1fr)" gap={6}>
  <Column gap={2}>…</Column>
  <DescriptionList.Root layout="stacked" aria-label="Project details">
    …
  </DescriptionList.Root>
</Grid>

Composition

Keep the visual order the document order: no grid-row or grid-column that moves what people read or tab through.

For items people count, use render={<ul />}, with each child a li, and name the list.

Accessibility

You provide

A list, with a name, where the items are a list people count.

envUI provides

A div with no role of its own, or the element in render.
Cells in the document order, row by row in the reading direction.

Props

Lays its direct children out in columns, `gap` apart: a number of equal columns, a template, or as many as fit at a minimum width. A CSS grid that sizes to its content and never paints.

Prop	Type	Description
`columns`	`GridColumns`	The columns: a number of equal columns, a `grid-template-columns` template, such as `'minmax(0, 2fr) minmax(0, 1fr)'`, or `{ min: '12rem' }`, as many equal columns as fit at that width or wider, with empty columns where items run out, so every item keeps one width. One column by default.
`gap`	`0123456789`	The space between rows and columns, a step of the spacing scale. None by default.
`align`Default `'stretch'`	`'start''center''end''stretch'`	How each child lines up in its cell's height: stretch, the default, fills the row; start, center and end keep it at its own height.
`render`	`ReactElement`	The element to render, for its meaning, such as render={<section />} or render={<ul />}, or another component to lay out without a wrapper, such as a Surface: the primitive's attributes merge into its props. It must forward native props and refs. A div by default.
`ref`	`Ref<RenderedElement>`	The rendered element, a div by default. Its type is the element type parameter, which a ref passed in sets: a ref to the element that render makes, such as useRef<HTMLElement>(null) with render={<section />}, type-checks.
`name`	`string`	A name for this node, such as "filters" or "summary", which dev mode and the docs show; it renders as `data-env-name`. A component's part class names its node instead.
`container`	`string`	Makes the element a size container of this name, for container queries on its inline size, such as container="filters" for `@container filters (width >= 37.5rem)`. A container is as wide as its context gives it, never as its content. container="env-window" makes the element a window of its own on purpose, such as a preview frame, whose content lays out at its window class; other `env-*` names are envUI's own.
`padding`	`0123456789`	The inset on every side, a step of the spacing scale. None by default.

Also accepts the native props of <div>, such as ref, className and aria-* attributes.

Changelog

1.0.0: Grid, with Row, Column and Box, the layout primitives.