styled-grid-component
    Overview
    Reviews
    Code
    Tutorials
    Playground
    Contributors
    Issues
    Documentation
    Chat

styled-grid-component

Grid Element for not writing any more custom grid styles because foda-se!

1.1.13  •  Updated 2 years ago  •  by Faustino Kialungila  •  MIT License

Styled Grid Component

Grid Element for not writing any more custom grid styles because foda-se!

Notice that this component was inspired by Flex - Element -> https://www.npmjs.com/package/styled-flex-component

Test it: https://codesandbox.io/s/m7rzqw40wp

Install

yarn add styled-grid-component
or
npm i styled-grid-component

Usage

import React from 'react';
import { Grid, GridItem } from 'styled-grid-component';

export default () => (
  <Grid
    width="100%"
    height="100vh"
    templateColumns="repeat(3, 1fr)"
    gap="10px"
    autoRows="minmax(100px, auto)"
  >
    <GridItem column="1 / 3" row="1">
      <h2>Hello</h2>
    </GridItem>
    <GridItem column="2 / 4" row="1 / 3">
      <h2>World!</h2>
    </GridItem>
  </Grid>
);

Props

All props without description are just true or false values and take no arguments

Grid Wrapper

  • width -> Sets the witdh
  • height -> Sets the height
  • templateColumns -> Sets the grid-template-columns
  • gap -> Sets the grid-gap
  • rowGap -> Sets the grid-row-gap
  • autoRows -> Sets the grid-auto-rows

GridItem

  • column -> Sets the grid-row
  • row -> Sets the grid-row

License

MIT

Popularity

Stars
23

Maintenance

Development

Last ver 2 years ago
Created 2 years ago
Last commit 2 years ago
16 days between commits

Technology

Node version: 8.0.0
17.4K unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

3 contributors
Sara Vieira
13 commits
Works at codesandbox
Faustino Kialungila
Maintainer, 8 commits
Works at Coorpacademy
Faustino Kialungila
3 commits
Stefan Leszkiewicz
2 commits
Works at Orchestrated

Tags

react
styled-components
css
css grid
grid
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.