Components

Grid Item

A grid item component designed to be used within a grid container, enabling the creation of complex and responsive grid templates with flexible content placement.

Usage

The Grid Item component allows to easily create flexible, responsive designs, and organize content within a CSS grid container.

Here is an example of using Grid Item components inside Multi Column grid container:

Item 1

Item 2

::container
---
display: "grid"
grid-columns: 5
border: "1px solid gray"
---
:::grid-item
---
grid-column: "1/4"
grid-row: "1/3"
styles: "background-color: lightgray"
padding: "20px"
---
Item 1
:::

:::grid-item
---
grid-column: "4/ span 2"
styles: "background-color: #BDDAE4"
---
Item 2
:::
::

Props

gridColumn

The horizontal placement of the Grid Item within a grid container. This prop defines both the starting and ending positions of the item across the columns, allowing you to control how many columns the item spans. This property is defined by two values: the first value indicates the start line (where the item begins), and the second value indicates the end line (where the item ends).

Note

This prop is different from the gridColumns prop used in the Container component. Accepts the native CSS allowed values for grid-column.

Example:

// item will start on column 1 and ends before column 3
grid-column: "1 / 3"
// item will start on column 1 and will span 3 columns
grid-column: "1 / span 3"
  • Type: string
  • Default: '1'
Learn, code, and build with our developer community
::grid-item
---
grid-column: "1 / 3"
---
Learn, code, and build with our developer community
::

gridColumnBreakpoints

Define grid column breakpoints to allow the Grid Item to be responsive within its container.

Note

This prop is different from the gridColumnsBreakpoints prop used in the Container component. Each breakpoint accepts the native CSS allowed values for grid-column.

  • Type: Breakpoints
  • Default: {}
    /** Grid Item horizontal placenet once the viewport width is greater than or equal to the breakpoint shown below. */
interface Breakpoints {
  /** 640px */
  mobile?: string
  /** 768px */
  phablet?: string
  /** 1024px */
  tablet?: string
  /** 1280px */
  laptop?: string
  /** 1536px */
  desktop?: string
}
Learn, code, and build with our developer community
::grid-item
---
grid-column: "1 / 3"
grid-column-breakpoints: 
  mobile: "1 / 3"
  phablet: "1 / 3"
  tablet: "1 / span 3"
  laptop: "1 / span 3"
  desktop: "1 / span 4"
---
Learn, code, and build with our developer community
::

gridRow

The vertical placement of the Grid Item within its grid container. The gridRow defines both the starting and ending positions of the item across the rows, allowing you to control how many rows the item spans.

Example:

// item will start on row 1 and ends before row 3
grid-row: "1 / 3"
// item will start on row 1 and will span 3 rows
grid-row: "1 / span 3"
  • Type: string
  • Default: '1'
Learn, code, and build with our developer community
::grid-item
---
grid-row: "1 / 3"
---
Learn, code, and build with our developer community
::

gridRowBreakpoints

Grid row breakpoints to make Grid Item in a container responsive.

  • Type: Breakpoints
  • Default: {}
Learn, code, and build with our developer community
::grid-item
---
grid-row: "1 / 3"
grid-row-breakpoints: 
  mobile: "1 / 3"
  phablet: "1 / 3"
  tablet: "1 / span 3"
  laptop: "1 / span 3"
  desktop: "1 / span 4"
---
Learn, code, and build with our developer community
::

Shared Props

This component also includes the shared props listed below:

  • padding - default is 0.
  • styles - default is ''.

See here for more information on shared props.

Slots

default

Use the #default slot to add content to the Grid Item component.

Learn, code, and build with our developer community
::grid-item
Learn, code, and build with our developer community
::