# Grid and responsive style
Place marks on explicit grid tracks and apply a local width rule.

## APIs demonstrated

- [Grid](/reference/components/grid/) from `@pibbl/core`
- [GridProps](/reference/types/layout/) from `@pibbl/core`
- [GridStyle](/reference/types/layout/) from `@pibbl/core`
- [GridTrack](/reference/types/layout/) from `@pibbl/core`
- [GridItemStyle](/reference/types/layout/) from `@pibbl/core`
- [PibblResponsiveStyle](/reference/types/styles/) from `@pibbl/core`
- [PibblSizeQuery](/reference/types/styles/) from `@pibbl/core`
- [PibblStyleRule](/reference/types/styles/) from `@pibbl/core`

## Complete example

[Plain source](/minimal/layout/grid-responsive.tsx). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```tsx
import {
  Grid,
  Rectangle,
  pibbl,
  signal,
  type PibblResponsiveStyle,
  type PibblSizeQuery,
  type PibblStyleRule,
  type GridItemStyle,
  type GridProps,
  type GridStyle,
  type GridTrack,
  type RectStyle,
} from "@pibbl/core";

const columns: readonly GridTrack[] = ["1fr", "2fr"];
const row: GridItemStyle = {
  gridColumnStart: 1,
  gridColumnSpan: 2,
  gridRowStart: 1,
};
const query: PibblSizeQuery = { maxWidth: 280 };
const narrowRule: PibblStyleRule<RectStyle> = {
  query,
  style: { fill: "#f97316" },
};
const responsive: PibblResponsiveStyle<RectStyle> = {
  width: "100%",
  height: "100%",
  fill: "#0f766e",
  when: [narrowRule],
};
const gridStyle: GridStyle = {
  width: 320,
  height: 220,
  gridTemplateColumns: columns,
  gridTemplateRows: [90, 90],
  gap: 8,
  padding: 10,
};
const gridWidth = signal(320);
const gridProps: GridProps = {
  children: (
    <>
      <Rectangle style={{ ...responsive, ...row }} />
      <Rectangle
        style={{
          gridColumnStart: 1,
          gridRowStart: 2,
          width: "100%",
          height: "100%",
          fill: "#7c3aed",
        }}
      />
      <Rectangle
        style={{
          gridColumnStart: 2,
          gridRowStart: 2,
          width: "100%",
          height: "100%",
          fill: "#e11d48",
        }}
      />
    </>
  ),
};
const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 220;
document.body.append(canvas);
const button = document.createElement("button");
button.textContent = "Narrow";
document.body.append(button);
button.addEventListener("click", () => {
  const narrow = gridWidth.get() === 320;
  gridWidth.set(narrow ? 260 : 320);
  button.textContent = narrow ? "Wide" : "Narrow";
});
const app = pibbl(
  canvas,
  <Grid {...gridProps} style={{ ...gridStyle, width: gridWidth }} />,
);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

```

## Usage notes

- Use Narrow/Wide to cross the local width query and change the top mark's color.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.