The Grid component is a low-level layout primitive for building grid layouts.
Summary
Functions
The Grid component is a low-level layout primitive for building grid layouts.
Functions
The Grid component is a low-level layout primitive for building grid layouts.
Themed Grid component.
Examples
<.grid columns="3" gap="4">
<div>1</div>
<div>2</div>
<div>3</div>
</.grid>Props
as- The element to render. Defaults to "div". Accepts: "div", "span".as_child- Composes the component into its immediate child instead of rendering its own HTML element.display- CSS display property. Accepts: "none", "inline-grid", "grid". Responsive supported.areas- Grid template areas. Accepts a string or responsive map.columns- Grid template columns. Accepts: 1-9, CSS string, or responsive map.rows- Grid template rows. Accepts: 1-9, CSS string, or responsive map.flow- Grid auto flow. Accepts: "row", "column", "dense", "row-dense", "column-dense". Responsive supported.align- Align items. Accepts: "start", "center", "end", "baseline", "stretch". Responsive supported.justify- Justify content. Accepts: "start", "center", "end", "between". Responsive supported.gap,gap_x,gap_y- Gap utilities for grid layouts. Responsive supported.p,pt,pr,pb,pl,px,py- Padding utilities (theme scale). Responsive supported.m,mt,mr,mb,ml,mx,my- Margin utilities (theme scale). Responsive supported.width,min_width,max_width- Width utilities. Responsive supported.height,min_height,max_height- Height utilities. Responsive supported.class- Additional CSS classes to add to the element.style- Additional inline styles.rest- Additional HTML attributes.inner_block- Slot for grid children.
Attributes
p(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.px(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.py(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.pt(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.pr(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.pb(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.pl(:any) - Padding utility class string or map. Example:1or%{xs: '1', sm: '2'}.width(:any) - Width utility class string or map.100pxor%{xs: '100px', sm: '200px'}.max_width(:any) - Max width utility class string or map.100pxor%{xs: '100px', sm: '200px'}.min_width(:any) - Min width utility class string or map.100pxor%{xs: '100px', sm: '200px'}.height(:any) - Height utility class string or map.100pxor%{xs: '100px', sm: '200px'}.max_height(:any) - Max height utility class string or map.100pxor%{xs: '100px', sm: '200px'}.min_height(:any) - Min height utility class string or map.100pxor%{xs: '100px', sm: '200px'}.position(:string) - CSS position property. Responsive supported. Must be one of"static","relative","absolute","fixed", or"sticky".inset(:string) - CSS inset property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".top(:string) - CSS top property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".right(:string) - CSS right property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".bottom(:string) - CSS bottom property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".left(:string) - CSS left property. Accepts scale values, CSS strings, responsive. Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".overflow(:string) - CSS overflow property. Responsive supported. Must be one of"visible","hidden","clip","scroll", or"auto".overflow_x(:string) - CSS overflow-x property. Responsive supported. Must be one of"visible","hidden","clip","scroll", or"auto".overflow_y(:string) - CSS overflow-y property. Responsive supported. Must be one of"visible","hidden","clip","scroll", or"auto".flex_basis(:string) - CSS flex-basis property. Responsive supported.flex_shrink(:string) - CSS flex-shrink property. Responsive supported. Must be one of"0", or"1".flex_grow(:string) - CSS flex-grow property. Responsive supported. Must be one of"0", or"1".grid_area(:string) - CSS grid-area property. Responsive supported.grid_column(:string) - CSS grid-column property. Responsive supported.grid_column_start(:string) - CSS grid-column-start property. Responsive supported.grid_column_end(:string) - CSS grid-column-end property. Responsive supported.grid_row(:string) - CSS grid-row property. Responsive supported.grid_row_start(:string) - CSS grid-row-start property. Responsive supported.grid_row_end(:string) - CSS grid-row-end property. Responsive supported.m(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mx(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.my(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mt(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mr(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mb(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.ml(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.as_child(:boolean) - Composes the component into its immediate child instead of rendering its own HTML element. Defaults tofalse.gap(:string) - Gap utility class (0-9, -1 to -9). Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".gap_y(:string) - Column gap utility class (0-9, -1 to -9). Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".gap_x(:string) - Row gap utility class (0-9, -1 to -9). Must be one of"0","1","2","3","4","5","6","7","8","9","-1","-2","-3","-4","-5","-6","-7","-8", or"-9".as(:string) - Defaults to"div". Must be one of"div", or"span".display(:string) - CSS display property. Responsive supported. Must be one of"none","inline-grid", or"grid".areas(:string) - Grid template areas. String or responsive map.columns(:any) - Grid template columns. 1-9, CSS string, or responsive map.rows(:any) - Grid template rows. 1-9, CSS string, or responsive map.flow(:string) - Grid auto flow. Responsive supported. Must be one of"row","column","dense","row-dense", or"column-dense".align(:string) - Align items. Responsive supported. Must be one of"start","center","end","baseline", or"stretch".justify(:string) - Justify content. Responsive supported. Must be one of"start","center","end", or"between".class(:string) - Additional CSS classes to add to the element. Defaults tonil.style(:string) - Defaults to"".- Global attributes are accepted.
Slots
inner_block(required)