Grid

Layout utilities for @bnotk/dsx: container, 12-column grid, flex helpers, app shell, and spacing utilities.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/grid.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Layout primitives

Class	Purpose
`.dsx-container`	Centered full-width container with horizontal padding
`.dsx-grid`	12-column CSS Grid with `var(--ds2-space-4)` gap
`.dsx-col-1` … `.dsx-col-12`	Span 1 to 12 columns
`.dsx-col-full`	Full-width item spanning `1 / -1`

Gap utilities

.dsx-gap-0, .dsx-gap-1, .dsx-gap-2, .dsx-gap-3, .dsx-gap-4, .dsx-gap-6, .dsx-gap-8

Flex utilities

Class	Purpose
`.dsx-flex`	Flex row
`.dsx-flex--col`	Flex column
`.dsx-flex--wrap`	Enables wrapping
`.dsx-flex--center`	Centers items on both axes
`.dsx-flex--between`	`justify-content: space-between`
`.dsx-flex--end`	`justify-content: flex-end`
`.dsx-items-center` / `.dsx-items-start` / `.dsx-items-end`	Cross-axis alignment helpers

App layout

Class	Purpose
`.dsx-layout-app`	App shell with header row and sidebar/main columns
`.dsx-layout-app__header`	Full-width header area inside the shell
`.dsx-layout-app__sidebar`	Fixed-width sidebar using `--ds2-sidepanel-width`
`.dsx-layout-app__main`	Scrollable main area

Spacing utilities

Margin: .dsx-m-0, .dsx-m-1, .dsx-m-2, .dsx-m-3, .dsx-m-4, .dsx-m-6, .dsx-m-8
Margin top: .dsx-mt-1, .dsx-mt-2, .dsx-mt-4, .dsx-mt-6, .dsx-mt-8
Margin bottom: .dsx-mb-1, .dsx-mb-2, .dsx-mb-4, .dsx-mb-6, .dsx-mb-8
Margin left: .dsx-ml-1, .dsx-ml-2, .dsx-ml-4
Margin right: .dsx-mr-1, .dsx-mr-2, .dsx-mr-4
Padding: .dsx-p-0, .dsx-p-1, .dsx-p-2, .dsx-p-3, .dsx-p-4, .dsx-p-6, .dsx-p-8
Directional padding: .dsx-pt-4, .dsx-pb-4, .dsx-px-4, .dsx-py-4

Example

<div class="dsx-container dsx-py-4">
  <div class="dsx-grid dsx-gap-4">
    <aside class="dsx-col-3">Filters</aside>
    <section class="dsx-col-9">Results</section>
  </div>

  <div class="dsx-flex dsx-flex--between dsx-items-center dsx-mt-4">
    <span>12 items</span>
    <button class="dsx-btn dsx-btn--secondary">Refresh</button>
  </div>
</div>

Accessibility notes

Use layout utilities without changing the meaningful DOM order.
Keep landmarks (header, nav, main) and headings semantic.
Avoid using spacing utilities to separate content that should be grouped with lists or tables.
The module has no interactive states; it is purely structural.