Unigrid

A layout system for React, set on the B‑module of the National Park Service publications.

Copy install command Read the research Open unigrid.app

1191 px · 12 columns

The house

Walter and Ise Gropius came to the United States in March 1937, when he took a post at the Graduate School of Design at Harvard. They chose Lincoln, 17 miles northwest of Boston. "We had gone around here everywhere," Ise said, "and we liked Lincoln best."

Helen Storrow, who owned the land, paid for the house and rented the site to the family, and left the design to Gropius. The family paid her 6 percent of the cost each year, and bought the land from her estate in 1945.

Gropius designed the house with Marcel Breuer, his partner and a colleague from the Bauhaus. Building began in March 1938, and the house was finished that September.

It has two stories on a wooden frame, a flat roof, and walls of vertical redwood boards painted white. Its materials come from two traditions: wood, brick and fieldstone from New England building, and glass block, acoustic plaster, welded steel and chrome banisters from industry.

Ise and their daughter, Ati, suggested many of its elements. The spiral staircase outside was built so that Ati and her friends could reach her bedroom on the second floor without disturbing the rest of the family.

Ise Gropius gave the house to the Society for the Preservation of New England Antiquities, now Historic New England. After her death in 1983 it opened as a museum, on 1 June 1985, with the family's furniture, books and belongings in place. It was designated a National Historic Landmark in 2000.

The living room

The living room is at the western end of the house, 14 feet 5 inches by 21 feet. The study, the dining room, the kitchen, a pantry and a maid's room share the first floor with it; the three bedrooms are upstairs.

Most of the furniture came with the family from Europe, from their earlier houses and from the Bauhaus workshops in Dessau. The laminated wood chaise longue by the window, under a sheepskin, is a design by Marcel Breuer, as are the tubular steel tables.

The shelves along the far wall hold the family's books, several of them on the Bauhaus.

The study, on the first floor. Walter and Ise Gropius both worked at the double desk under its north window, made in the Bauhaus workshops. Outside the window is the spiral staircase to Ati's room.

Gropius HouseNational Historic LandmarkLincoln, MassachusettsDesigned by Walter Gropiuswith Marcel Breuer

Shown at 56%

A layout in the construction of the 1985 specification, with its band and its bar, is authored on twelve columns and stands as written while its window holds them all. As the window narrows, its cells move onto the whole modules each width holds.

The module

Every layout is built from one module, 84 by 80 pixels by default, with 12 pixels between columns and 10 between rows. A container holds as many of them as fit whole.

From picas to pixels

The 1985 specification sets the B‑module 7 picas wide and 80 points tall: 84 by 80 points.

Unigrid reads those points as CSS pixels, so the figures carry across unchanged. CSS sets 96 pixels and 72 points to its inch, so the module in pixels is three quarters of the module in points.

Whole modules, centred

A container holds as many complete modules as its width allows: the width and one interval, divided by the 96 pixel pitch, rounded down. CSS auto-fill arrives at the same count; Unigrid computes it itself, so it can centre the field and place every cell on it.

In a fluid layout, what is left over is always smaller than a module and its interval, and it is divided evenly between the two sides. An authored layout stops at its own columns and centres its field in the rest.

Composition

A cell is placed by its coordinates when its position matters, or in sequence by its span. Both stand on the same module.

Coordinates, released together

With a numeric authoredColumns, a cell can carry an x, y, w and h, counted in modules.

When the container holds fewer columns, every coordinate is released at once and the cells take their source order. A reader sees the layout you wrote complete, or every cell in sequence.

Spans in sequence

With authoredColumns set to fluid and reflowFlow set to pack, cells carry spans only. They keep their size and fill each row in source order.

The field takes every complete module the container holds.

No format in the Unigrid System requires any alteration in size of type, maps, or illustrations. Small formats are not miniatures of larger formats.

National Park Service, Unigrid Design Specifications, 1985

Read it, then resize it

Each drawing is Unigrid itself, given the props in its code and shown with its guide, at the width you set.

import { Unigrid, Cell }
  from '@khannaoffice/unigrid'
 
<Unigrid
  authoredColumns={6}
  initialColumns={6}
>
  <Cell x={0} y={0} w={4} h={2}>
    Main
  </Cell>
  <Cell x={4} y={0} w={2} h={2}>
    Aside
  </Cell>
</Unigrid>

Main

Aside

Install

Unigrid needs only React. The command installs both.

npm install @khannaoffice/unigrid react

Size: About 10 KB, minified and gzipped. The layout arithmetic alone is about 2 KB.
React: Version 18 or 19, the peer range >=18 <20. Tested with 18.3.1 and 19.2.6.
Format: ES modules, with TypeScript declarations.
Dependencies: None.
Next.js: Use it inside a client component. The package does not include the "use client" directive.
Licence: KhannaOffice Unigrid License 1.0, source-available. You may use it in the websites and web applications you make, for yourself or for clients. You may not redistribute it as a library, template or other reusable product.
Published: 13 August 2026