A simple CSS Grid System

#css #react #javascript

sc-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

responsive breakpoint xs,sm,md,lg,xl
responsive gutter/gap option
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}>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
        </Grid>
    );
}