Does Terminal CSS include a grid system?

Updated

No. Terminal CSS does not ship with a built-in grid system. The framework's own documentation states this directly and suggests that you roll your own layout using Flexbox or CSS Grid. Terminal CSS instead focuses on terminal-style typography and styling for standard HTML elements, so any multi-column or structured page layout is something you write yourself with plain CSS.

What Terminal CSS does provide

Based on the documented components, the framework covers presentational and content elements rather than layout scaffolding:

  • Typography — headings from Level 1 through Level 6, paragraphs, and body text styling.
  • Navigation — a nav bar pattern with a logo, items, and an active state.
  • Lists — unordered, ordered, child, and description lists.
  • Table of contents — an index-style component that supports only a single depth level.
  • Tables — styled data tables (the docs use traditional Japanese colors as the example).
  • Special elements — including blockquotes.

The documentation's component list does not include a grid, columns, or container system, which is consistent with the explicit statement that no grid system is built in.

How to build your own layout

Because there is no grid to configure, you supply the layout layer yourself. The two options the documentation names are Flexbox and CSS Grid.

Flexbox for one-dimensional layout

Use Flexbox when you are arranging items along a single axis — a nav bar, a toolbar, or a row of cards.

<div class="row">
  <div class="col">Item #1</div>
  <div class="col">Item #2</div>
  <div class="col">Item #3</div>
</div>

.row {
  display: flex;
  gap: 1rem;
}

.col {
  flex: 1;
}

Input: a container with child elements. Action: set display: flex on the container and let children flex. Expected result: the children sit side by side and share the available width.

CSS Grid for two-dimensional layout

Use CSS Grid when you need control over both rows and columns — for example, a dashboard with a sidebar and a main content area.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1rem;
}

Input: a wrapper element containing a sidebar and a main region. Action: define grid-template-columns with a fixed sidebar width and a flexible main column. Expected result: a persistent sidebar with a fluid content area, without adding any framework grid classes.

What to watch for

  • No grid classes to look up. Since the framework provides none, don't expect class names like container, row, or col-6 to exist. Any such classes in your markup are your own.
  • The TOC component is single-depth. If you were hoping to use it as a nested navigation tree, it only supports one level.
  • Styling and layout are separate concerns here. Terminal CSS handles how elements look; you handle where they sit. Plan for a small amount of custom CSS on every project that needs more than a single column.

Is this the right choice for you?

Choose Terminal CSS if you want terminal-inspired typography and element styling and are comfortable writing your own Flexbox or CSS Grid layout. Look elsewhere if you need a framework with a ready-made responsive grid, since you would be adding that layer yourself either way.