Components

Component

Grid

Responsive layout grid with explicit native limits.

ReactReact Native5 props
PreviewReact

colSpan 2

1

2

responsive area

Imports

import { Grid } from "@hozorica/hods-react";
import { Grid } from "@hozorica/hods-react-native";

Props

PropTypeDescription
columnsnumber | stringColumn count or CSS template on web; number on RN.
rowsnumber | stringWeb-only row template.
autoFlow / autoRows / autoColumnsstringWeb-only CSS Grid auto placement.
colSpannumber | fullSupported on both platforms.
rowSpan / start / endnumber | fullWeb-only placement controls. RN accepts them as no-op compatibility props.

Platform Support

React

CSS Grid with rows, columns, auto flow, and GridItem placement.

React Native

Simple flex-wrap column grid. Only columns and colSpan affect layout.

Usage

<Grid columns={3} gap="x2"><GridItem colSpan={2}>Wide</GridItem></Grid>

Notes

  • RN Grid is intentionally not a full CSS Grid clone.
  • Use RN Grid for equal-width card/chip layouts, not dense masonry or row-span layouts.