Layout Grid Utility

The TXDS Layout Grid Utility provides a 12-column responsive layout system modeled after utility-based grids such as USWDS.

Core classes

Class	Purpose
.txds-container	Centered page container with max width
.txds-container-fluid	Full-width container with page padding
.txds-grid-row	Flex row with wrap and gutters
.txds-col	Equal-width fluid column
.txds-col-1 ... .txds-col-12	Fixed-width columns in a 12-column grid
.txds-col-sm-* / .txds-col-md-* / .txds-col-lg-* / .txds-col-xl-*	Breakpoint column widths
.txds-offset-*	Left offset columns
.txds-gx-* / .txds-gy-*	Horizontal and vertical gutter utilities

Equal-width columns

Three equal columns

.txds-col

Fixed column spans

8 / 4 split

.txds-col-8

.txds-col-4

Responsive behavior

Stacks on mobile, 6/6 at md and up

.txds-col-12 .txds-col-md-6

Offsets

Centered 6-column block with offset

.txds-col-6 .txds-offset-3

Gutter controls

Compact gutters

.txds-col-4

Example markup

<div class="txds-container">
  <div class="txds-grid-row txds-gx-4 txds-gy-4">
    <aside class="txds-col-12 txds-col-lg-3">Sidebar</aside>
    <main class="txds-col-12 txds-col-lg-9">Main content</main>
  </div>
</div>