Grid

Build grid-based layouts using CSS Grid

Use the Grid component to build grid-based layouts and organize your content into up to 8 columns. To use the Grid component, make sure you don’t have the includeUtilities rule disabled in your setup mixin (this rule is enabled by default):

@use 'webcoreui/styles' as *;
@include setup((
    ...,
    includeUtilities: false // Remove this option if you want to use the Grid component
));

---
import { Grid } from 'webcoreui/astro'
---

<Grid>
    <Box>1</Box>
    <Box>2</Box>
    <Box>3</Box>
</Grid>

<script>
    import { Grid } from 'webcoreui/svelte'
</script>

<Grid>
    <Box>1</Box>
    <Box>2</Box>
    <Box>3</Box>
</Grid>

import React from 'react'
import { Grid } from 'webcoreui/react'

const Component = () => (
    <Grid>
        <Box>1</Box>
        <Box>2</Box>
        <Box>3</Box>
    </Grid>
)

export default Component

Simply pass your elements or components inside the Grid component to display them in a grid container. By default, the element will be rendered as a div. This can be changed using the element prop:

<Grid element="section">...</Grid> <!-- Rendered as a `section` -->
<Grid element="article">...</Grid> <!-- Rendered as an `article` -->
<Grid element="main">...</Grid> <!-- Rendered as a `main` -->

Gap

The gap between grid items is set to 20px by default. To change this, use the gap prop with one of the following values:

<Grid gap="none" />
<Grid gap="xxs" />
<Grid gap="xs" />
...

You can configure your gaps using the webcore.config.scss configuration file. Read more about how to configure gaps in the CSS configuration documentation.

Column

To set the number of columns for your grid container, you can use the column prop:

<Grid /> <!-- Defaults to 1 column -->
<Grid column={2} />
<Grid column={3} />

You can set the column prop up to 3 which will set the number of columns for all devices. To set columns up to 8 on larger breakpoints, you can use a responsive value:

Responsiveness

The above properties can also be used responsively. Simply pass an object for the prop that you’d like to change based on media queries, and define the following props:

<Grid gap={{
    default: 'none',
    xs: 'xs',
    sm: 'sm',
    md: 'md',
    lg: 'lg'
}} />

<Grid column={{
    default: 2,
    xs: 3,
    sm: 4,
    md: 5,
    lg: 6
}} />

All breakpoints are optional, you can create the object as needed.

API

type GridProps = {
    element?: string
    gap?: Responsive<Gap>
    column?: Responsive<Column>
    className?: string
    [key: string]: any
}

type ReactGridProps = {
    Element?: keyof JSX.IntrinsicElements
    children: React.ReactNode
} & Omit<GridProps, 'element'>

type Gap = 'none'
    | 'xxs'
    | 'xs'
    | 'sm'
    | 'md'
    | 'default'
    | 'lg'
    | 'xl'
    | 'xl2'
    | 'xl3'
    | 'xl4'
    | 'xl5'

type Column = (2 | 3) | {
    default?: 2 | 3
    xs?: 2 | 3 | 4
    sm?: 2 | 3 | 4
    md?: 2 | 3 | 4 | 5 | 6
    lg?: 2 | 3 | 4 | 5 | 6 | 7 | 8
}

type Responsive<T> = T | {
    default?: T
    xs?: T
    sm?: T
    md?: T
    lg?: T
}