Grid

Layout component that can be used to create a responsive grid for your content.

Import

import { Grid } from '@vortex-kit/vortex';
import type { GridProps } from '@vortex-kit/vortex';

Display

<Grid display="grid" columns={12} gap={4}>
      <Grid.Item columns={{ xs: '1 / 4', lg: '7 / -1' }}>
          {children}
      </Grid.Item>
</Grid>

Allied components

Stack Container

Features

Flexible layout options

Responsive design for various screen sizes

Easy alignment and spacing of items

Support for complex layouts with minimal code

Improved performance with CSS Grid over traditional layouts

Reference Links

CSS Grid Layout Guide

Display

The Grid component supports various display settings including grid, inline-grid, and flex-column.

The CSS properties display: flex; and flex-direction: column; are used together to create a flex-column display, which is specifically designed for mobile layouts.

Display grid generates a block-level grid.
Display inline-grid generates an inline-level grid.
Display flex-column generates a flex column (recommended for mobile).

Show Code

Responsive Display

Use responsive display to switch between flex-column for mobile and grid for desktop.

Show Code

Columns

The columns prop is used to define the number of columns in the grid.

Column Start and End

The columnStart and columnEnd props are used to define the start and end of the grid item in the columns.

Show Code

You can simplify the definition of grid item columns by using the columns prop, which combines the functionality of grid-column-start and grid-column-end into a single shorthand notation.

Show Code

Grid Area

The gridArea prop is used to define the area of the grid item. It is a shorthand for grid-column-start + grid-column-end + grid-row-start + grid-row-end.

Show Code

Rows

The rows prop is used to define the number of rows in the grid.

Show Code

You can simplify the definition of grid item rows by using the rows prop, which combines the functionality of grid-row-start and grid-row-end into a single shorthand notation.

Show Code

Gap

The columnGap prop is used to define the gap between the grid items in the columns.

Show Code

Property rowGap is used to define the gap between the grid items in the rows.

Show Code

The gap prop is a shorthand for columnGap and rowGap.

Show Code

Border Colors

Grid supports border color variants for the grid container: default, bold, transparent, inverse, primary, success, warning, info, critical.

Show Code

Align Items

The alignItems prop is used to define the alignment of the grid items along the block (column) axis.

Show Code

Justify Items

The justifyItems prop is used to define the alignment of the grid items along the inline (row) axis.

Show Code

Align Content

In certain scenarios, the overall size of your grid may be smaller than that of its container. This situation often arises when grid items are defined with fixed dimensions, such as pixels. To enhance the layout, you can modify the alignment of the grid within its container. This property governs the alignment of the grid along the block (column) axis, while the justify-content property manages alignment along the inline (row) axis.

Show Code

Justify Content

The justifyContent property is essential for aligning the grid items along the inline (row) axis, ensuring a well-structured and visually appealing layout.

Show Code

Padding

The padding property is used to define the padding of the grid items.

Show Code

The paddingInline property is used to define the padding inline for the Grid and Grid.Item components.

Show Code

Margin

The margin property is used to define the margin of the grid items.

Show Code

The marginInline property is used to define the margin inline for the Grid and Grid.Item components.

Show Code

Margin Auto

Use marginInline="auto" or marginStart="auto" for automatic centering.

Show Code

Align Self

The alignSelf prop is used to align a grid item inside a cell along the block (column) axis.

Show Code

Justify Self

The justifySelf prop is used to align a grid item inside a cell along the inline (row) axis.

Show Code

Grid Template

The gridTemplate property is a shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.

Show Code

Grid Template Areas

The gridTemplateAreas prop defines named grid areas using CSS Grid template areas syntax.

Show Code

Size

The size of the grid has 6 possible values:

height - height of the grid container.
width - width of the grid container.
min-height - minimum height of the grid container.
min-width - minimum width of the grid container.
max-height - maximum height of the grid container.
max-width - maximum width of the grid container.

Show Code

Min/Max Sizes

Use minWidth, minHeight, maxWidth, and maxHeight to control grid boundaries.

Show Code

Composition

Grid.Item is a compound component that provides additional control over individual items within a Grid container. It allows for precise positioning, sizing, and alignment of grid items.

Show Code

Column Positioning

The columns prop allows you to specify the column span and position of grid items using CSS Grid syntax.

Show Code

Row Positioning

The rows prop allows you to specify the row span and position of grid items.

Show Code

Grid Area Positioning

The gridArea prop provides a shorthand for positioning items using CSS Grid area syntax.

Show Code

Self Alignment

Grid.Item supports individual alignment properties for fine-grained control over item positioning.

Show Code

Item Spacing

Grid.Item supports individual padding and margin properties for custom spacing.

Show Code

Accessibility

Key	Description
⬢	If as prop is omitted, it defaults to div.
⬢	Use semantic HTML elements with the as prop for better accessibility (e.g., as="main", as="section").
⬢	Grid supports custom attributes for additional accessibility features.
⬢	Consider using flex-column display for mobile devices to improve accessibility and usability.