Grid

Overview

naUI uses a 12-column CSS Grid system. Add na-grid to any container, then control spans with na-col-* or lock all children to equal columns with na-grid-columns-*. Auto-fit helpers create responsive grids without media queries.

Basic grid

na-grid creates a 12-column grid with a default 1.5rem gap. Child elements span the full row unless given a na-col-* class.

<div class="na-grid">
  <div class="na-col-6">...</div>
  <div class="na-col-6">...</div>
  <div class="na-col-4">...</div>
  <div class="na-col-4">...</div>
  <div class="na-col-4">...</div>
  <div class="na-col-3">...</div>
  <div class="na-col-9">...</div>
</div>

Fixed column count

Use na-grid-columns-* (1-12) to force all children into equal columns. Combine with na-grid or use standalone.

<div class="na-grid na-grid-columns-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Full-width span

na-col-full spans all 12 columns regardless of the grid's column count.

<div class="na-grid na-grid-columns-3">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div class="na-col-full">spans all 12</div>
</div>

Auto-fit helpers

Auto-fit grids reflow without media queries. Three presets set the minimum column width.

<div class="na-grid-auto-m">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Gap overrides

Override the default 1.5rem gap with a na-grid-gap-* modifier.

Class reference