Primitive Class

Lism provides Primitive classes as small building blocks for assembling layouts.

• l--{name}: Layout Primitives that serve as the building blocks of layouts.
• a--{name}: Atomic Primitives that represent the smallest units of a layout.

Layout Primitives

Primitives that serve as the building blocks of layouts.

| Class | Description | |---|---| | l--box | Simple primitive for grouping content | | l--flow | Flow-root primitive that auto-manages spacing between children | | l--frame | Fits child media to its own size | | l--flex | Lays out content using Flexbox | | l--cluster | Arranges items horizontally with automatic wrapping | | l--stack | Arranges elements vertically | | l--withSide | Two-column layout with side and main areas | | l--grid | Lays out content using CSS Grid | | l--tileGrid | Uniform row-column grid (tile layout) | | l--center | Centers content both horizontally and vertically | | l--columns | Column layout with breakpoint-based column counts | | l--autoColumns | Fluid columns that wrap based on column width | | l--switchColumns | Automatically switches between multi-column and single-column |

Choosing a column-layout Primitive

Several Primitives can arrange items in columns. Pick the one that best fits your use case.

Comparison table

How well each Primitive fits each use case:

| Use case | l--columns | l--autoColumns | l--switchColumns | l--withSide | l--grid | |---|---|---|---|---|---| | Equal-width N columns | ◯ | ◯ | ✗ | ✗ | △ | | Single toggle between multi-column and 1-column | ◯ | ✗ | ◯ | ✗ | △ | | Auto-wrapping based on a minimum column width | ✗ | ◯ | ✗ | ✗ | △ | | Side + main (asymmetric two-column) | △ | ✗ | ✗ | ◯ | △ | | BP-based column-count switching | ◯ | ✗ | ✗ | ✗ | △ | | Responsive without breakpoints | ✗ | ◯ | ◯ | ◯ | ✗ |

Legend: ◯ suitable / △ possible but verbose / ✗ not suitable

How to choose

Equal-width N columns, or column count varying by breakpoint

Recommended: l--columns

Use cols={3} for a fixed column count. Pass cols as an array to declaratively specify column counts per breakpoint.

<Columns cols={[1, 2, 3]} g="20">...</Columns>

l--grid with gtc="repeat(3, 1fr)" can produce the same visual result, but l--columns is more concise when all you need is equal-width columns or column-count switching.

Auto-wrap once columns drop below a minimum width

Recommended: l--autoColumns

Independent of breakpoints. Lets you concisely express auto-fill / auto-fit behavior based on a minimum column width. Suitable for card lists, product lists, logo grids, etc.

<AutoColumns cols="20rem" g="20">...</AutoColumns>

Single toggle between “horizontal” and “1 column”

Recommended: l--switchColumns

When the available width of the element itself drops below breakSize, the layout flips to a vertical stack in one step. No breakpoint or container-query setup is required, but you still define the switching threshold with breakSize. If you need progressive column-count changes, use l--columns or l--autoColumns instead.

<SwitchColumns breakSize="s" g="20">...</SwitchColumns>

Side + main (asymmetric two-column) that auto-switches based on content width

Recommended: l--withSide

When the main side can no longer maintain mainW, the layout automatically switches to vertical. No breakpoint design required.

<WithSide sideW="240px" mainW="20rem" g="20">
  <Box>Main</Box>
  <Box isSide>Side</Box>
</WithSide>

If the media element is placed first and marked with isSide, combine fxd="row-reverse" to alternate sides horizontally — while still keeping the media on top when stacked.

If you need explicit breakpoint-based switching, you can build the same look with l--grid using gta template switching (l--withSide is more declarative and concise).

Fixed row × column tile layout

Recommended: l--tileGrid

This is less a column-layout choice and more a Grid variant for cases where you also want to fix the row count. cols / rows concisely produce repeat(rows, minmax(0, 1fr)) / repeat(cols, minmax(0, 1fr)).

<TileGrid cols="3" rows="2" g="10">...</TileGrid>

Complex layouts centered on Grid templates

Recommended: l--grid

A general-purpose Primitive for layouts centered on Grid templates, such as named areas, element overlays (ga="1/1"), and subgrid. gta / gtc themselves are Property Classes and can be used with other Primitives too, but choose l--grid when the Grid template is the main structure.

Atomic Primitives

Primitives that represent the smallest units of a layout.

| Class | Description | |---|---| | a--decorator | Empty element for decoration | | a--divider | Divider line between content | | a--icon | Outputs an SVG icon | | a--spacer | Empty element for spacing between elements |