@bedrock-layout/grid
TypeScript icon, indicating that this package has built-in type declarations

4.4.0 • Public • Published

@bedrock-layout/grid

Grid is a layout helper that creates a responsive grid of items.

Full docs at: bedrock-layout.dev


When to Use

Grid can be used to create a responsive grid layouts that can automatically wrap depending on the number of child elements and a minItemWidth value.


How to install

npm install @bedrock-layout/grid

or

yarn add @bedrock-layout/grid


Usage

import { Grid } from '@bedrock-layout/grid';

<Grid minItemWidth={300}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</Grid>;

data-attribute

For styling purposes, you can select data-bedrock-grid.


API

* required

Property Description Type Default
gutter* sets the space between each child element One of Spacing** -
minItemWidth sets the min width size of each child element number or valid CSS length as a string small (639px)

** By default, Spacing is one of spacing-constants values, but this can be overwritten using the ThemeProvider from @bedrock-layout/spacing-constants

Dependencies (2)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @bedrock-layout/grid

    Weekly Downloads

    155

    Version

    4.4.0

    License

    MIT

    Unpacked Size

    7.35 kB

    Total Files

    7

    Last publish

    Collaborators

    • jarvis1010