Primitives( l--*, a--* )
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 | columns |
autoColumns |
switchColumns |
withSide |
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 you place the media element first and mark it isSide, you can alternate fxd="row-reverse" on each pair. This alternates which side the media sits on when laid out horizontally, while stacking always keeps the media on top — useful when arranging multiple media-and-text pairs.
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 |