Grid Module
The Grid module provides a flexible column-based layout system. It supports configurable gaps, responsive column sizing via registered units, alignment, and justification.
Signature:
scss
@mixin use-grid($gaps: (), $units: ());Example:
scss
@include termeh.use-grid(("small", "medium", "large"), ("1-2", "1-3", "1-4"));Dependencies
Grid module uses the following Termeh global var():
| Component | Type | Usage | Default |
|---|---|---|---|
gap → macro | Number | Default spacing between grid rows and columns | 1.6em |
Modifiers
.is-gapless→ removes spacing between columns.is-<gap>-gap→ applies a registered gap as spacing.is-<align>-align→ sets vertical alignment.is-<justify>-justify→ sets horizontal justification.is-<device>-<align>-align→ sets responsive vertical alignment.is-<device>-<justify>-justify→ sets responsive horizontal justification
Child Elements
.column→ defines a column inside the grid.break→ forces columns to wrap to the next line
Column Modifiers
.is-<unit>→ sets column width using a registered unit.is-fit→ fits column width to its content.is-<device>-<unit>→ sets responsive column width.is-<device>-fit→ fits column width to its content responsively