Can I use this CSS Grid track editor for free in a commercial project?

Yes. The component is free to use in commercial and personal projects.

Which CSS track values are accepted?

Non-negative px, rem and percent values, positive fr values, and minmax() with a fixed minimum and supported maximum are accepted.

Does it convert units or build the page grid?

No. It preserves the entered units and only previews the ordered track list.

Grid Track Editor

A controlled CSS Grid track editor for forms and layout tools.

Product comparison

Compare plans at a glance

Set flexible columns for feature labels and plan details.

Comparison tracks

Track 1 definition

Track 2 definition

Track 3 definition

Column 1

Column 2

Column 3

Magazine layout

A narrow image rail

Keep a fixed image beside a fluid article column.

Magazine tracks

Track 1 definition

Track 2 definition

Track 3 definition

Column 1

Column 2

Column 3

Input Grid Track edits an ordered list of CSS Grid column tracks while preserving each authored unit.

Its bounded grammar accepts px, rem, percent, fr and a single minmax() form. Unsupported expressions stay visible and are isolated from the preview.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/input-grid-track

Usage

"use client";

import { useState } from "react";
import { InputGridTrack } from "@/components/input-grid-track";

export function LayoutEditor() {
  const [tracks, setTracks] = useState(["minmax(12rem, 1fr)", "2fr"]);
  return <InputGridTrack value={tracks} onChange={setTracks} label="Comparison tracks" />;
}

Props

Prop	Type	Default	Description
value	readonly string[]	required	Ordered CSS grid track expressions.
onChange	(value: string[]) => void	required	Receives immutable snapshots after editing or structural actions.
maxTracks	number	12	Maximum track count, clamped to an integer from 1 to 24.
label	string	Grid tracks	Fieldset legend and preview region name.
className	string	undefined	Additional classes merged on the component root.

Customisation

The preview is a calibration aid rather than a page builder. Consumers retain control over where edited tracks are applied.

.layout-control { max-inline-size: 56rem; }

Frequently asked questions

Can I use this CSS Grid track editor for free in a commercial project?: Yes. The component is free to use in commercial and personal projects.
Which CSS track values are accepted?: Non-negative px, rem and percent values, positive fr values, and minmax() with a fixed minimum and supported maximum are accepted.
Does it convert units or build the page grid?: No. It preserves the entered units and only previews the ordered track list.

Related components

Build a complete formExplore more accessible form controls for your React project.Form components