DEV Community

Cover image for A simple CSS Grid System
M Adeel Ahsan
M Adeel Ahsan

Posted on

A simple CSS Grid System


Simple CSS grid system component built with styled component for react.
sc-css-grid-system utilizes the power of CSS grid and styled-components to easily create responsive grids.

key features

  1. responsive breakpoint xs,sm,md,lg,xl
  2. responsive gutter/gap option
  3. really easy to use

Responsive Grid Example:

import {Grid} from 'sc-css-grid-system';

function CssGridSystem() {
    return (
        <Grid xs={2} sm={3} md={4} lg={6} xl={12} gap={30}>
Enter fullscreen mode Exit fullscreen mode

render as:
Hnet-image (1)

for complete documentation and demo:

Github repo



Discussion (0)