# Grid And Responsiveness
Grid makes your website much more responsive.
Create a website
which fit every screen size
Home
/ Grid And Responsiveness
1rem
1import { Grid } from "funuicss";1 lines • 32 chars
1rem
1import { Col } from "funuicss";1 lines • 31 chars
#
Our Grid System Explained
1
2
3
4
5
6
7
8
9
10
11
12
#
Simple Grid
Showing how grids works on every device , sm prop is for small screens,md for medium screens and lgfor large screens
React / Next.js
#
Simple Grid Team Page
This is a simple team page made with grid, each card covers 6 columns and each row is made up of 12 columns
React / Next.js
#
Simple Grid Photo Gallery
Lets use a simple grid system to build a photo gallery.
React / Next.js
Grid
The <Grid /> is used to create a row and wrap all columns(col)
| Prop | Description | Value(s) |
|---|---|---|
| `justify` | Use to justify Content | `CSS justify-content values` |
| `gap` | Creates gaps between cols | `<Number>` |
| `align` | To align Items | `CSS align-Items values` |
Col
The <Col /> is used to create a colunm (col)
| Prop | Description | Value(s) |
|---|---|---|
| `sm` | How many columns the grid will cover on small screen. (Mobile phones) | `1 - 12` |
| `md` | How many columns the grid will cover on medium screen. (Tablet) | `1 - 12` |
| `lg` | How many columns the grid will cover on large screen. (Laptop) | `1 - 12` |
| `sm-order` | Changes the order of the element on small screens. (Mobile phones) | `1 - 12` |
| `md-order` | Changes the order of the element on medium screens. (Tablet) | `1 - 12` |
| `lg-order` | Changes the order of the element on large screens. (Laptop) | `1 - 12` |