Unigrid

CSS Framework

Formats

DIN-inspired page formats that define panel-based layout containers. The A-series uses single-width panels and the B-series uses double-width panels, with column counts from 1 to 6.

How Formats Work

Each format sets CSS custom properties for panel width and column count. When a .ug-grid or .ug-broadside is placed inside a format container, its grid-template-columns is automatically configured to match the format's column count.

FormatPanels WidePanels LongColumns
.ug-format--a1111
.ug-format--a2122
.ug-format--a3133
.ug-format--a4144
.ug-format--a6166
.ug-format--b1211
.ug-format--b2222
.ug-format--b3233
.ug-format--b4244
.ug-format--b6266

A-Series: Single Width

A1 Format (1 column)

A1 format

Single column content
<div class="ug-format ug-format--a1" style="background:#f5f2ed;padding:1rem">
  <div class="ug-grid">
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Single column content</div>
  </div>
</div>

A2 Format (2 columns)

A2 format

Column 1
Column 2
<div class="ug-format ug-format--a2" style="background:#f5f2ed;padding:1rem">
  <div class="ug-grid">
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Column 1</div>
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Column 2</div>
  </div>
</div>

A3 Format (3 columns)

A3 format

Col 1
Col 2
Col 3
<div class="ug-format ug-format--a3" style="background:#f5f2ed;padding:1rem">
  <div class="ug-grid">
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 1</div>
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 2</div>
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 3</div>
  </div>
</div>

A4 Format (4 columns)

A4 format

Col 1
Col 2
Col 3
Col 4
<div class="ug-format ug-format--a4" style="background:#f5f2ed;padding:1rem">
  <div class="ug-grid">
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 1</div>
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 2</div>
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 3</div>
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 4</div>
  </div>
</div>

A6 Format (6 columns)

A6 format

1
2
3
4
5
6
<div class="ug-format ug-format--a6" style="background:#f5f2ed;padding:1rem">
  <div class="ug-grid">
    <div style="background:#e8e5e0;padding:0.5rem;text-align:center">1</div>
    <div style="background:#e8e5e0;padding:0.5rem;text-align:center">2</div>
    <div style="background:#e8e5e0;padding:0.5rem;text-align:center">3</div>
    <div style="background:#e8e5e0;padding:0.5rem;text-align:center">4</div>
    <div style="background:#e8e5e0;padding:0.5rem;text-align:center">5</div>
    <div style="background:#e8e5e0;padding:0.5rem;text-align:center">6</div>
  </div>
</div>

B-Series: Double Width

B-series formats use double-width panels, giving the container more horizontal space while maintaining the same column counts.

B1 Format (1 column, double width)

B1 format

Full width content (double panel)
<div class="ug-format ug-format--b1" style="background:#f5f2ed;padding:1rem">
  <div class="ug-grid">
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Full width content (double panel)</div>
  </div>
</div>

B2 Format (2 columns, double width)

B2 format

Column 1
Column 2
<div class="ug-format ug-format--b2" style="background:#f5f2ed;padding:1rem">
  <div class="ug-grid">
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Column 1</div>
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Column 2</div>
  </div>
</div>

B3 Format (3 columns, double width)

B3 format

Col 1
Col 2
Col 3
<div class="ug-format ug-format--b3" style="background:#f5f2ed;padding:1rem">
  <div class="ug-grid">
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 1</div>
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 2</div>
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 3</div>
  </div>
</div>

B4 Format (4 columns, double width)

B4 format

Col 1
Col 2
Col 3
Col 4
<div class="ug-format ug-format--b4" style="background:#f5f2ed;padding:1rem">
  <div class="ug-grid">
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 1</div>
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 2</div>
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 3</div>
    <div style="background:#e8e5e0;padding:1rem;text-align:center">Col 4</div>
  </div>
</div>

B6 Format (6 columns, double width)

B6 format

1
2
3
4
5
6
<div class="ug-format ug-format--b6" style="background:#f5f2ed;padding:1rem">
  <div class="ug-grid">
    <div style="background:#e8e5e0;padding:0.5rem;text-align:center">1</div>
    <div style="background:#e8e5e0;padding:0.5rem;text-align:center">2</div>
    <div style="background:#e8e5e0;padding:0.5rem;text-align:center">3</div>
    <div style="background:#e8e5e0;padding:0.5rem;text-align:center">4</div>
    <div style="background:#e8e5e0;padding:0.5rem;text-align:center">5</div>
    <div style="background:#e8e5e0;padding:0.5rem;text-align:center">6</div>
  </div>
</div>

DIN Aspect Ratios

Companion utility classes for DIN-standard aspect ratios (1:1.4142).

DIN ratio utilities

DIN portrait
DIN landscape 
<div style="display:flex;gap:1rem;flex-wrap:wrap">
  <div class="ug-ratio--din" style="width:100px;background:#e8e5e0;display:flex;align-items:center;justify-content:center">
    DIN portrait
  </div>
  <div class="ug-ratio--din-landscape" style="height:100px;background:#e8e5e0;display:flex;align-items:center;justify-content:center">
    DIN landscape
  </div>
</div>

Class Reference

Class Description
.ug-format Base format container (centered, full width)
.ug-format--a1 A-series, 1 panel wide, 1 column
.ug-format--a2 A-series, 1 panel wide, 2 columns
.ug-format--a3 A-series, 1 panel wide, 3 columns
.ug-format--a4 A-series, 1 panel wide, 4 columns
.ug-format--a6 A-series, 1 panel wide, 6 columns
.ug-format--b1 B-series, 2 panels wide, 1 column
.ug-format--b2 B-series, 2 panels wide, 2 columns
.ug-format--b3 B-series, 2 panels wide, 3 columns
.ug-format--b4 B-series, 2 panels wide, 4 columns
.ug-format--b6 B-series, 2 panels wide, 6 columns
.ug-ratio--din DIN portrait aspect ratio (1:1.414)
.ug-ratio--din-landscape DIN landscape aspect ratio (1.414:1)