layout-grid-figma
v1.0.6
Published
A React component library for creating customizable grid layouts inspired by Figma.
Downloads
6
Maintainers
Readme
Layout Grid Figma
The Layout Grid Library provides React components for creating grid layouts similar to those in Figma. It includes components for both row-based and column-based grids with customizable properties for alignment, spacing, and styling.
Installation
To install the library, use npm:
npm install layout-grid-figma
Components
LayoutRowsGrid
A component for creating a row-based grid layout.
Props
rows
(number): Number of rows in the grid. Default is8
.marginRows
(number): Margin between rows in rem. Must be between0
and6
. Default is2
.alignRows
('center' | 'stretch' | 'flex-end' | 'flex-start'): Alignment of rows. Default is'center'
.heightRows
(string | number): Height of the grid. Default is'100%'
.gutterRows
(number): Gutter size between rows in rem. Must be between0
and6
. Default is1
.color
(string): Background color of rows. Default is'#000'
.opacity
(number): Opacity of rows. Default is0.1
.
Example Usage
import React from 'react';
import { LayoutRowsGrid } from 'layout-grid-figma';
const MyComponent = () => (
<LayoutRowsGrid
rows={10}
marginRows={3}
alignRows="center"
heightRows="50vh"
gutterRows={2}
color="blue"
opacity={0.5}
/>
);
LayoutColumnsGrid
A component for creating a column-based grid layout.
Props
columns
(number): Number of columns in the grid. Must be between1
and12
. Default is12
.marginColumns
(number): Margin between columns in rem. Must be between0
and6
. Default is2
.alignColumns
('center' | 'stretch' | 'flex-end' | 'flex-start'): Alignment of columns. Default is'center'
.widthColumns
(string | number): Width of the grid. Default is'100%'
.gutterColumns
(number): Gutter size between columns in rem. Must be between0
and6
. Default is1
.color
(string): Background color of columns. Default is'#000'
.opacity
(number): Opacity of columns. Default is0.1
.
Example Usage
import React from 'react';
import { LayoutColumnsGrid } from 'layout-grid-figma';
const MyComponent = () => (
<LayoutColumnsGrid
columns={8}
marginColumns={3}
alignColumns="center"
widthColumns="80vw"
gutterColumns={2}
color="green"
opacity={0.3}
/>
);
Contributing Contributions are welcome! Please open an issue or submit a pull request.