Grid

The Grid component is a layout component that allows you to create a responsive grid layout. It uses a flexbox based layout system to create a grid of columns and rows.

Component

Basic Usage

Use the Grid component to create a container and nested items. Here’s an example of a basic grid layout:

Item 1

Item 2

Item 3

Item 4

---
import { Grid } from "@gemini-ui-astro/components";
---

<Grid container>
  <Grid xs={12} sm={6} md={3}>Item 1</Grid>
  <Grid xs={12} sm={6} md={3}>Item 2</Grid>
  <Grid xs={12} sm={6} md={3}>Item 3</Grid>
  <Grid xs={12} sm={6} md={3}>Item 4</Grid>
</Grid>

In this example, each Grid item takes up the full width on extra-small devices (xs=12) and half width on small devices (sm=6), eventually becoming a quarter of the width on medium-sized devices and larger (md=3).

Responsive Layout

The Grid system is responsive, adapting to various screen sizes using the props xs, sm, md, and lg. These props define how many columns the item should span at different breakpoints.

Aligning Items

Control the alignment of items within the container using verticalAlign and horizontalAlign props. For example:

Centered Item

Vertically Centered Item

---
import { Grid } from "@gemini-ui-astro/components";
---

<Grid container>
  <Grid xs={6} horizontalAlign="center"><div style={{height: '400px'}}>Centered Item</div></Grid>
  <Grid xs={6} horizontalAlign="center" verticalAlign="center"><div>Vertically Centered Item</div></Grid>
</Grid>

Gap Handling

Define the space between grid items using gap, columnGap, and rowGap props. For instance:

Item 1

Item 2

Item 3

---
import { Grid } from "@gemini-ui-astro/components";
---

<Grid container gap="8px">
  <Grid xs={12} sm={4}>Item 1</Grid>
  <Grid xs={12} sm={4}>Item 2</Grid>
  <Grid xs={12} sm={4}>Item 3</Grid>
</Grid>

This sets a uniform gap between grid items.

You can also use columnGap and rowGap to define the space between columns and rows, respectively.

Auto column sizing

You can use the auto size prop to make a column automatically take up the remaining space. For example:

Item 1

Item 2

Item 3 auto

---
import { Grid } from "@gemini-ui-astro/components";
---

<Grid container gap="8px">
  <Grid xs={12} sm={4}>Item 1</Grid>
  <Grid xs={12} sm={4}>Item 2</Grid>
  <Grid xs={12} sm="auto">Item 3 auto</Grid>
</Grid>

Nested Grids

You can nest Grid components to create complex layouts. For example:

Item 1

Item 2

Item 3

---
import { Grid } from "@gemini-ui-astro/components";
---

<Grid container gap="8px">
  <Grid xs={12} sm={7}>
    <Grid container gap="8px">
      <Grid xs={12} sm={6}>Item 1</Grid>
      <Grid xs={12} sm={6}>Item 2</Grid>
    </Grid>
  </Grid>
  <Grid xs={12} sm={5}>Item 3</Grid>
</Grid>

Props

The Grid component has the following props.

Name	Type	Default	Description
container	boolean	false	Defines a row in the grid
gap	OptionalSizeProp	-	Defines the gap between columns and rows
columnGap	OptionalSizeProp	-	Defines the gap between columns
rowGap	OptionalSizeProp	-	Defines the gap between rows
xs	1-12 | ‘auto’	-	Defines the column size for mobile devices and larger
sm	1-12 | ‘auto’	-	Overrides the column size for Tablet devices and larger
md	1-12 | ‘auto’	-	Overrides the column size for Small Desktop devices and larger
lg	1-12 | ‘auto’	-	Overrides the column size for Large Desktop devices and larger
verticalAlign	”flex-start” | “center” | “flex-end"	"flex-start”	Defines how the content will be placed vertically within the column
horizontallyAlign	”left” | “center” | “right"	"left”	Defines how the content will be placed horizontally within the column
class	string	-	Override or extend the styles applied to the component.