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 a responsive grid layout. On mobile, items stack full-width. On tablet and above, items arrange into a Aside layout with a featured item spanning two rows:

API Gateway

Manage all your APIs from a single control plane with built-in rate limiting and authentication.

Analytics

Monitor request volumes, latency metrics, and error rates in real-time.

Documentation

Auto-generate OpenAPI specs and interactive API references for your consumers.

::container
---
display: "grid"
grid-columns: 3
gap: "16px"
---
  :::grid-item
  ---
  grid-column: "1 / -1"
  grid-column-breakpoints:
    tablet: "1 / 2"
  grid-row: "auto"
  grid-row-breakpoints:
    tablet: "1 / 3"
  padding: "24px"
  styles: |
    background-color: #007ac1;
    color: white;
    border-radius: 8px;
    min-height: 120px;
  ---
  **API Gateway**

  Manage all your APIs from a single control plane with built-in rate limiting and authentication.
  :::

  :::grid-item
  ---
  grid-column: "1 / -1"
  grid-column-breakpoints:
    tablet: "2 / 4"
  padding: "24px"
  styles: |
    background-color: #BDDAE4;
    border-radius: 8px;
  ---
  **Analytics**

  Monitor request volumes, latency metrics, and error rates in real-time.
  :::

  :::grid-item
  ---
  grid-column: "1 / -1"
  grid-column-breakpoints:
    tablet: "2 / 4"
  padding: "24px"
  styles: |
    background-color: #d4edda;
    border-radius: 8px;
  ---
  **Documentation**

  Auto-generate OpenAPI specs and interactive API references for your consumers.
  :::
::

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).

  • Type: string
  • Default: 'auto'
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"

Column 1

Spans columns 1-2

Column 2

Spans columns 3-4

::container
---
display: "grid"
grid-columns: 4
gap: "16px"
---
  :::grid-item
  ---
  grid-column: "1 / 3"
  padding: "20px"
  styles: |
    background-color: #007ac1;
    color: white;
    border-radius: 8px;
  ---
  **Column 1**

  Spans columns 1-2
  :::

  :::grid-item
  ---
  grid-column: "3 / 5"
  padding: "20px"
  styles: |
    background-color: #BDDAE4;
    border-radius: 8px;
  ---
  **Column 2**

  Spans columns 3-4
  :::
::

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 placement 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
}

Featured

Full width on mobile, spans 2 columns on tablet+

Aside

Full width on mobile, column 3 on tablet+

::container
---
display: "grid"
grid-columns: 3
gap: "16px"
padding: "20px"
---
  :::grid-item
  ---
  grid-column: "1 / -1"
  grid-column-breakpoints:
    tablet: "1 / 3"
  padding: "20px"
  styles: |
    background-color: #007ac1;
    color: white;
    border-radius: 8px;
  ---
  **Featured**

  Full width on mobile, spans 2 columns on tablet+
  :::

  :::grid-item
  ---
  grid-column: "1 / -1"
  grid-column-breakpoints:
    tablet: "3 / 4"
  padding: "20px"
  styles: |
    background-color: #BDDAE4;
    border-radius: 8px;
  ---
  **Aside**

  Full width on mobile, column 3 on tablet+
  :::
::

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.

  • Type: string
  • Default: 'auto'

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"

Aside - Spans 2 rows

Main content - Row 1

Main content - Row 2

::container
---
display: "grid"
grid-columns: 3
gap: "16px"
---
  :::grid-item
  ---
  grid-column: "1 / 2"
  grid-row: "1 / 3"
  padding: "20px"
  styles: |
    background-color: #1C6564;
    color: white;
    border-radius: 8px;
  ---
  **Aside**

  Spans 2 rows
  :::

  :::grid-item
  ---
  grid-column: "2 / 4"
  padding: "20px"
  styles: |
    background-color: #BDDAE4;
    border-radius: 8px;
  ---
  **Main content** - Row 1
  :::

  :::grid-item
  ---
  grid-column: "2 / 4"
  padding: "20px"
  styles: |
    background-color: #d4edda;
    border-radius: 8px;
  ---
  **Main content** - Row 2
  :::
::

gridRowBreakpoints

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

  • Type: Breakpoints
  • Default: {}

Aside

Stacks on mobile, spans 2 rows on tablet+

Main content - Row 1

Main content - Row 2

::container
---
display: "grid"
grid-columns: 3
gap: "16px"
---
  :::grid-item
  ---
  grid-column: "1 / -1"
  grid-column-breakpoints:
    tablet: "1 / 2"
  grid-row: "auto"
  grid-row-breakpoints:
    tablet: "1 / 3"
  padding: "20px"
  styles: |
    background-color: #1C6564;
    color: white;
    border-radius: 8px;
  ---
  **Aside**

  Stacks on mobile, spans 2 rows on tablet+
  :::

  :::grid-item
  ---
  grid-column: "1 / -1"
  grid-column-breakpoints:
    tablet: "2 / 4"
  padding: "20px"
  styles: |
    background-color: #BDDAE4;
    border-radius: 8px;
  ---
  **Main content** - Row 1
  :::

  :::grid-item
  ---
  grid-column: "1 / -1"
  grid-column-breakpoints:
    tablet: "2 / 4"
  padding: "20px"
  styles: |
    background-color: #d4edda;
    border-radius: 8px;
  ---
  **Main content** - Row 2
  :::
::

Shared Props

This component also includes the shared props listed below:

  • padding - default is var(--kui-space-0, 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.

Build scalable APIs with comprehensive documentation and real-time analytics.
::grid-item
Build scalable APIs with comprehensive documentation and real-time analytics.
::