This content originally appeared on DEV Community and was authored by M Adeel Ahsan

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>
    );
}

render as:

for complete documentation and demo:

Github repo

NPM

SC-CSS-Grid-System

This content originally appeared on DEV Community and was authored by M Adeel Ahsan

Print Share Comment Cite Upload Translate Updates

APA

M Adeel Ahsan | Sciencx (2021-10-15T15:11:46+00:00) A simple CSS Grid System. Retrieved from https://www.scien.cx/2021/10/15/a-simple-css-grid-system/

MLA

" » A simple CSS Grid System." M Adeel Ahsan | Sciencx - Friday October 15, 2021, https://www.scien.cx/2021/10/15/a-simple-css-grid-system/

HARVARD

M Adeel Ahsan | Sciencx Friday October 15, 2021 » A simple CSS Grid System., viewed ,<https://www.scien.cx/2021/10/15/a-simple-css-grid-system/>

VANCOUVER

M Adeel Ahsan | Sciencx - » A simple CSS Grid System. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/15/a-simple-css-grid-system/

CHICAGO

" » A simple CSS Grid System." M Adeel Ahsan | Sciencx - Accessed . https://www.scien.cx/2021/10/15/a-simple-css-grid-system/

IEEE

" » A simple CSS Grid System." M Adeel Ahsan | Sciencx [Online]. Available: https://www.scien.cx/2021/10/15/a-simple-css-grid-system/. [Accessed: ]

rf:citation

» A simple CSS Grid System | M Adeel Ahsan | Sciencx | https://www.scien.cx/2021/10/15/a-simple-css-grid-system/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

sc-css-grid-system

key features

Responsive Grid Example:

for complete documentation and demo:

NPM

Related Posts