A responsive grid. Auto fits tracks at the layout minimum to the available space; explicit 1–4 columns use equal flexible tracks. Compose with cem-stack.
Full examples and variation matrix · Property playground · Automated stories
{slice @name=class | }{cem-field @label="class" @value="{$datadom.slices.class}" @slice=class @slice-event=input @slice-value="$target.value"}
{slice @name=columns | auto}{fieldset @role=group @aria-label="columns" @slice=columns @slice-event=change @slice-value="$target.value" | {legend | columns}{cem-radio @name="property-columns" @value="auto" @label="auto" @checked={if datadom.slices.columns == "auto" {true} else {null}}}{cem-radio @name="property-columns" @value="1" @label="1" @checked={if datadom.slices.columns == "1" {true} else {null}}}{cem-radio @name="property-columns" @value="2" @label="2" @checked={if datadom.slices.columns == "2" {true} else {null}}}{cem-radio @name="property-columns" @value="3" @label="3" @checked={if datadom.slices.columns == "3" {true} else {null}}}{cem-radio @name="property-columns" @value="4" @label="4" @checked={if datadom.slices.columns == "4" {true} else {null}}}}
{slice @name=gap | md}{fieldset @role=group @aria-label="gap" @slice=gap @slice-event=change @slice-value="$target.value" | {legend | gap}{cem-radio @name="property-gap" @value="md" @label="md" @checked={if datadom.slices.gap == "md" {true} else {null}}}{cem-radio @name="property-gap" @value="sm" @label="sm" @checked={if datadom.slices.gap == "sm" {true} else {null}}}{cem-radio @name="property-gap" @value="lg" @label="lg" @checked={if datadom.slices.gap == "lg" {true} else {null}}}}
{slice @name=dir | ltr}{fieldset @role=group @aria-label="dir" @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name="property-dir" @value="ltr" @label="ltr" @checked={if datadom.slices.dir == "ltr" {true} else {null}}}{cem-radio @name="property-dir" @value="rtl" @label="rtl" @checked={if datadom.slices.dir == "rtl" {true} else {null}}}}
{slice @name=hidden | absent}{fieldset @role=group @aria-label="hidden" @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name="property-hidden" @value="absent" @label="absent" @checked={if datadom.slices.hidden == "absent" {true} else {null}}}{cem-radio @name="property-hidden" @value="present" @label="present" @checked={if datadom.slices.hidden == "present" {true} else {null}}}}
{cem-grid @columns="{$datadom.slices.columns}" @gap="{$datadom.slices.gap}" @class="{$datadom.slices.class}" @dir="{$datadom.slices.dir}" @hidden={if datadom.slices.hidden == "present" {true} else {null}} | {p | First cell}{p | Second cell}{p | Third cell}{p | Fourth cell}}{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-grid/cem-grid.xhtml"}{cem:if @test="datadom.slices.sourceUrl" | {p | {a @href="{$datadom.slices.sourceUrl}" | Open canonical XHTML}}{cem-demo-element @legend="Canonical source" @src="{$datadom.slices.sourceUrl}" @type=xml @demo=false}}