▦ Grid Templates

Define the rows and columns of your grid.

The gridTemplateColumns and gridTemplateRows properties define the line names and track sizing functions of the grid.

Track Sizing

Each track is defined using a min and max sizing function:

Example

Named Areas and Template Dimensions

gridTemplateAreas is an array of named rectangles. Their rowStart, rowEnd, columnStart, and columnEnd values are one-based grid line numbers, with end lines exclusive.

import { Display, Style } from "taffy-layout";

const namedGrid = new Style({
  display: Display.Grid,
  gridTemplateAreas: [
    { name: "header", rowStart: 1, rowEnd: 2, columnStart: 1, columnEnd: 3 },
  ],
  gridTemplateAreaRowCount: 3,
  gridTemplateAreaColumnCount: 4,
});

The named area above spans one row and two columns. The count properties extend the template to three rows and four columns, including unnamed cells (the . cells in CSS grid-template-areas).

The effective counts are at least the largest named end line minus one. Reading either count returns this effective dimension. Replacing or clearing gridTemplateAreas recalculates the inferred dimensions; only explicitly assigned counts persist. Set a count to 0 to remove that axis's explicit minimum. These rules also apply to Style.set(), styles returned by tree.getStyle(), and style copies passed to measure callbacks.

Use gridTemplateRowNames and gridTemplateColumnNames for arrays of names attached to grid lines. They are separate from the named area rectangles.

API Reference

• GridTemplateComponent
• GridTemplateArea

Next Steps

• Grid Column
• Grid Row