Skip to content

Grid Components

Description

The GridContainer and GridItem components provide a flexible grid layout system that supports: - Dynamic column count based on screen size - Responsive design adjustments - Flexible row and column spacing

Props

GridContainer Props

Prop Type Default Description
spacing number 2 Defines the gap between grid items (in multiples of 8px).
columns number | { xs, sm, md, lg } 1 Number of columns, can be responsive.
py number 0 Vertical padding (in multiples of 8px).
px number 0 Horizontal padding (in multiples of 8px).

GridItem Props

Prop Type Default Description
size number | { xs, sm, md, lg } 12 Column span of the grid item, can be responsive.
columnSpan number | { xs, sm, md, lg } - Allows setting span dynamically.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { GridContainer, GridItem } from "@nomana-it/liberty-core"

export const GridExample = () => {
  return (
    <GridContainer spacing={2} columns={{ xs: 1, sm: 2, md: 3, lg: 4 }}>
      <GridItem size={{ xs: 12, sm: 6, md: 4, lg: 3 }} style={{ background: "#0044cc", color: "white", padding: "20px", borderRadius: "8px" }}>
        Item 1
      </GridItem>
      <GridItem size={{ xs: 12, sm: 6, md: 4, lg: 3 }} style={{ background: "#3366ff", color: "white", padding: "20px", borderRadius: "8px" }}>
        Item 2
      </GridItem>
      <GridItem size={{ xs: 12, sm: 6, md: 4, lg: 3 }} style={{ background: "#5588ff", color: "white", padding: "20px", borderRadius: "8px" }}>
        Item 3
      </GridItem>
    </GridContainer>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core