Grid Layout Engine

TokyCSS uses a CSS Grid system with named grid lines to create content-aware page layouts. The grid defines three horizontal lanes:

• Main — the primary readable content area (default 80ch)
• Fill — a wider breakout area extending beyond main
• Full — edge-to-edge, spanning the whole viewport

Named grid lines mark the boundaries:

| full-start | gutter | fill-start | breakout | main-start | content | main-end | breakout | fill-end | gutter | full-end |

All direct children of .layout--grid default to the main lane. Override with lane classes (see Layout Styles for the class system).

Configure the lane widths in styleguide.css:

@layer styleguide {
  :root {
    --tk-content-width: 80ch;        /* Main lane width */
    --tk-content-fill-width: 90ch;   /* Fill lane width */
    --tk-page-gutter: var(--tk-size-20);  /* Side gutters */
  }
}

Position

Variable	Value
--tk-position-static	static
--tk-position-relative	relative
--tk-position-absolute	absolute
--tk-position-fixed	fixed
--tk-position-sticky	sticky

Display

Variable	Value
--tk-display-block	block
--tk-display-inline	inline
--tk-display-inline-block	inline-block
--tk-display-flex	flex
--tk-display-inline-flex	inline-flex
--tk-display-grid	grid
--tk-display-none	none

Overflow

Variable	Value
--tk-overflow-auto	auto
--tk-overflow-hidden	hidden
--tk-overflow-visible	visible
--tk-overflow-scroll	scroll

Flexbox

Direction:

--tk-flex-direction-row: row;
--tk-flex-direction-column: column;
--tk-flex-direction-row-reverse: row-reverse;

Justify content (main axis):

--tk-justify-start: flex-start;
--tk-justify-center: center;
--tk-justify-between: space-between;
--tk-justify-around: space-around;
--tk-justify-evenly: space-evenly;

Align items (cross axis):

--tk-align-start: flex-start;
--tk-align-end: flex-end;
--tk-align-center: center;
--tk-align-baseline: baseline;
--tk-align-stretch: stretch;

Grid

--tk-grid-auto-fit: auto-fit;
--tk-grid-auto-fill: auto-fill;

Gap

Variable	Value
--tk-gap-0	0
--tk-gap-xs	2px
--tk-gap-sm	4px
--tk-gap-md	8px
--tk-gap-lg	16px
--tk-gap-xl	32px

Z-Index

Variable	Value
--tk-z-index-auto	auto
--tk-z-index-0	0
--tk-z-index-xs	1
--tk-z-index-sm	10
--tk-z-index-md	100
--tk-z-index-lg	1000
--tk-z-index-xl	10000

Aspect Ratios

--tk-aspect-ratio-square: 1 / 1;
--tk-aspect-ratio-video: 16 / 9;
--tk-aspect-ratio-portrait: 3 / 4;
--tk-aspect-ratio-landscape: 4 / 3;
--tk-aspect-ratio-widescreen: 21 / 9;
--tk-aspect-ratio-golden: 1.618 / 1;