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.

Auto

Auto

Auto

FIT

1-of-4

Auto

Half

Auto

1-of-5

1-of-5

1-of-5

Auto

Signature:

@mixin use-grid($gaps: (), $units: ());

Example:

@include termeh.use-grid(("small", "medium", "large"), ("1-2", "1-3", "1-4"));

Module:

This module is registered as grid in the presented modules.

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