# Grid And Responsiveness
Grid makes your website much more responsive. Create a website which fit every screen size
Home
/
Grid And Responsiveness 
import { Grid } from "funuicss";
import { Col } from "funuicss";
#
Our Grid System Explained
1
2
3
4
5
6
7
8
9
10
11
12
Our framework divides your screen into 12 sections Therefore one section makes up 8.33333% with six section covering 49.33333% of your screen, or half of you screen. 12 sections covers 99.33333% of your screen, which is still 100% of your screen.
#
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
Shrink your browser to see the effect on each screen
sm={12} md={6} lg={6}
sm={12} md={6} lg={6}
sm={12} md={4} lg={4}
sm={12} md={4} lg={4}
sm={12} md={4} lg={4}
#
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
John Deo
Co-Founder / CEO
Praesentium iure error aliquam voluptas ut libero. Commodi placeat sit iure nulla officiis. Ut ex sit repellat tempora. Qui est accusamus exercitationem natus ut voluptas. Officiis velit eos ducimus
Mary Bell
Frontend Developer
Praesentium iure error aliquam voluptas ut libero. Commodi placeat sit iure nulla officiis. Ut ex sit repellat tempora.
Alicia Jane
Business Relations
Praesentium iure error aliquam voluptas ut libero. Commodi placeat sit iure nulla officiis. Ut ex sit repellat tempora. Qui est accusamus exercitationem natus ut voluptas. Officiis velit eos ducimus
Vincert Peter
Principal Designer
Praesentium iure error aliquam voluptas ut libero. Commodi placeat sit iure nulla officiis. Ut ex sit repellat tempora. Qui est accusamus exercitationem natus ut voluptas. Officiis velit eos ducimus
#
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)
PropDescriptionValue(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)
PropDescriptionValue(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`
Previous
Container
Next
Buttons