v1.2.0

Grid

Grid implements a responsive 12-column layout using CSS flexbox. It supports container/item roles with breakpoint-based column spanning.

Basic Grid

xs=12 sm=6 md=3
xs=12 sm=6 md=3
xs=12 sm=6 md=3
xs=12 sm=6 md=3
<me-grid container spacing="2"> <me-grid item xs="12" sm="6" md="3">content</me-grid> <me-grid item xs="12" sm="6" md="3">content</me-grid> <me-grid item xs="12" sm="6" md="3">content</me-grid> <me-grid item xs="12" sm="6" md="3">content</me-grid> </me-grid>

Variable Column Spans

xs=8
xs=4
xs=4
xs=8
xs=12

Auto Layout

Use xs="true" to allow items to grow and share available space equally.

auto
xs=6
auto
<me-grid container spacing="2"> <me-grid item xs="true">auto</me-grid> <me-grid item xs="6">xs=6</me-grid> <me-grid item xs="true">auto</me-grid> </me-grid>

Spacing

spacing="0"
A
B
C
spacing="4"
A
B
C

API — Container

AttributeTypeDefaultDescription
containerbooleanfalseMakes this element a flex container.
spacingnumber | CSS value0Gap between items. Numbers are multiplied by 8px.
directionrow | column | row-reverse | column-reverserowFlex direction.
justifyflex-start | flex-end | center | space-between | space-aroundflex-startMain-axis justification.
alignflex-start | flex-end | center | stretch | baselinestretchCross-axis alignment.

API — Item

AttributeTypeDescription
itembooleanMakes this a grid item (implicit when no container).
xs1–12 | auto | trueColumn span at xs breakpoint (≥0px).
sm1–12 | auto | trueColumn span at sm breakpoint (≥600px).
md1–12 | auto | trueColumn span at md breakpoint (≥900px).
lg1–12 | auto | trueColumn span at lg breakpoint (≥1200px).
xl1–12 | auto | trueColumn span at xl breakpoint (≥1536px).