Grid (<e-grid>)

The e-grid component creates a responsive grid layout using CSS Grid. It offers three modes controlled by the mode property: 'fit' (default), 'fill', and 'count'.

Basic Usage

Basic Usage (Default min: 10em):

<e-grid>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</e-grid>

With Custom Minimum Width and Gap:

<e-grid min="5em" gap="0.5rem">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</e-grid>

Examples

Default Grid (mode="fit"): gap="0.5rem"

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Custom Min/Gap (mode="fit"): min="5em" gap="1rem"

Item 1
Item 2
Item 3
Item 4

Fixed Width Items (mode="fit"): min="5em" max="5em"

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Fill Mode (mode="fill"): min="auto" max="10em"

Item 1
Item 2
Item 3

Count Mode (mode="count"): count="3" min="auto"

Item 1
Item 2
Item 3
Item 4
Item 5

Properties

  • mode <'fit' | 'fill' | 'count'> (Default: 'fit')
    • Controls grid layout mode: fit (adjusts columns, default), fill (preserves empty tracks), count (fixed column count). Attribute: mode.
  • count <number> (Default: 4)
    • Number of columns when mode="count". Maps to --grid-count. Attribute: count.
  • min <string> (Default: '10em')
    • Minimum item width in minmax(). Maps to --grid-min. Attribute: min.
  • max <string> (Default: '100%')
    • Maximum item width in minmax(). Maps to --grid-max. Attribute: max.
  • gap <string> (Default: '1em')
    • Space between grid items. Maps to --grid-gap. Attribute: gap.
  • tag <string> (Default: undefined)
    • Provides a semantic hint (e.g., ‘ul’). Does not change the rendered tag. Useful for CSS selectors (e-grid[tag="..."]). Attribute: tag.
*   The space (grid-gap) between grid cells. Accepts any valid CSS `gap` value.