Grid

.grid
1
2
3
 
{ display: grid }

Templates

Columns

.cols-1
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(1, minmax(0, 1fr)) }
.cols-2
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
.cols-3
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
.cols-4
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(4, minmax(0, 1fr)) }
.cols-5
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(5, minmax(0, 1fr)) }
.cols-6
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(6, minmax(0, 1fr)) }
.cols-7
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(7, minmax(0, 1fr)) }
.cols-8
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(8, minmax(0, 1fr)) }
.cols-9
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(9, minmax(0, 1fr)) }
.cols-10
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(10, minmax(0, 1fr)) }
.cols-11
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(11, minmax(0, 1fr)) }
.cols-12
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(12, minmax(0, 1fr)) }
.cols-fill-0-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(0px, 1fr)) }
.cols-fit-0-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(0px, 1fr)) }
.cols-fill-5-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(5px, 1fr)) }
.cols-fit-5-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(5px, 1fr)) }
.cols-fill-10-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(10px, 1fr)) }
.cols-fit-10-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(10px, 1fr)) }
.cols-fill-15-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(15px, 1fr)) }
.cols-fit-15-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(15px, 1fr)) }
.cols-fill-20-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)) }
.cols-fit-20-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(20px, 1fr)) }
.cols-fill-25-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(25px, 1fr)) }
.cols-fit-25-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(25px, 1fr)) }
.cols-fill-30-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)) }
.cols-fit-30-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)) }
.cols-fill-35-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(35px, 1fr)) }
.cols-fit-35-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(35px, 1fr)) }
.cols-fill-40-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)) }
.cols-fit-40-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)) }
.cols-fill-45-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)) }
.cols-fit-45-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(45px, 1fr)) }
.cols-fill-50-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)) }
.cols-fit-50-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)) }
.cols-fill-55-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)) }
.cols-fit-55-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(55px, 1fr)) }
.cols-fill-60-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) }
.cols-fit-60-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)) }
.cols-fill-65-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)) }
.cols-fit-65-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(65px, 1fr)) }
.cols-fill-70-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) }
.cols-fit-70-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) }
.cols-fill-75-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) }
.cols-fit-75-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)) }
.cols-fill-80-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) }
.cols-fit-80-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) }
.cols-fill-85-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)) }
.cols-fit-85-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)) }
.cols-fill-90-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) }
.cols-fit-90-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) }
.cols-fill-95-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)) }
.cols-fit-95-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)) }
.cols-fill-100-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) }
.cols-fit-100-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) }
.cols-fill-105-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)) }
.cols-fit-105-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)) }
.cols-fill-110-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) }
.cols-fit-110-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) }
.cols-fill-115-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) }
.cols-fit-115-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)) }
.cols-fill-120-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) }
.cols-fit-120-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) }
.cols-fill-125-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)) }
.cols-fit-125-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)) }
.cols-fill-130-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) }
.cols-fit-130-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) }
.cols-fill-135-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) }
.cols-fit-135-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)) }
.cols-fill-140-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) }
.cols-fit-140-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) }
.cols-fill-145-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) }
.cols-fit-145-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) }
.cols-fill-150-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
.cols-fit-150-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) }
.cols-fill-155-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) }
.cols-fit-155-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)) }
.cols-fill-160-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) }
.cols-fit-160-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) }
.cols-fill-165-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) }
.cols-fit-165-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) }
.cols-fill-170-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) }
.cols-fit-170-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) }
.cols-fill-175-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) }
.cols-fit-175-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)) }
.cols-fill-180-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) }
.cols-fit-180-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) }
.cols-fill-185-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) }
.cols-fit-185-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)) }
.cols-fill-190-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) }
.cols-fit-190-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) }
.cols-fill-195-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)) }
.cols-fit-195-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)) }
.cols-fill-200-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) }
.cols-fit-200-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }
.cols-fill-205-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)) }
.cols-fit-205-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)) }
.cols-fill-210-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) }
.cols-fit-210-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) }
.cols-fill-215-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) }
.cols-fit-215-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)) }
.cols-fill-220-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) }
.cols-fit-220-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) }
.cols-fill-225-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)) }
.cols-fit-225-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)) }
.cols-fill-230-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) }
.cols-fit-230-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) }
.cols-fill-235-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)) }
.cols-fit-235-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)) }
.cols-fill-240-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) }
.cols-fit-240-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.cols-fill-245-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)) }
.cols-fit-245-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) }
.cols-fill-250-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) }
.cols-fit-250-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) }
.cols-fill-255-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)) }
.cols-fit-255-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)) }
.cols-fill-260-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) }
.cols-fit-260-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.cols-fill-265-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)) }
.cols-fit-265-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)) }
.cols-fill-270-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) }
.cols-fit-270-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) }
.cols-fill-275-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)) }
.cols-fit-275-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)) }
.cols-fill-280-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) }
.cols-fit-280-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }
.cols-fill-285-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)) }
.cols-fit-285-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)) }
.cols-fill-290-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) }
.cols-fit-290-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) }
.cols-fill-295-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)) }
.cols-fit-295-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(295px, 1fr)) }
.cols-fill-300-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) }
.cols-fit-300-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.cols-fill-305-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(305px, 1fr)) }
.cols-fit-305-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(305px, 1fr)) }
.cols-fill-310-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) }
.cols-fit-310-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)) }
.cols-fill-315-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(315px, 1fr)) }
.cols-fit-315-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(315px, 1fr)) }
.cols-fill-320-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) }
.cols-fit-320-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) }
.cols-fill-325-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(325px, 1fr)) }
.cols-fit-325-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(325px, 1fr)) }
.cols-fill-330-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) }
.cols-fit-330-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) }
.cols-fill-335-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(335px, 1fr)) }
.cols-fit-335-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(335px, 1fr)) }
.cols-fill-340-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) }
.cols-fit-340-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) }
.cols-fill-345-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(345px, 1fr)) }
.cols-fit-345-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(345px, 1fr)) }
.cols-fill-350-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) }
.cols-fit-350-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) }
.cols-fill-355-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(355px, 1fr)) }
.cols-fit-355-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(355px, 1fr)) }
.cols-fill-360-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) }
.cols-fit-360-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) }
.cols-fill-365-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(365px, 1fr)) }
.cols-fit-365-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(365px, 1fr)) }
.cols-fill-370-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)) }
.cols-fit-370-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(370px, 1fr)) }
.cols-fill-375-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(375px, 1fr)) }
.cols-fit-375-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(375px, 1fr)) }
.cols-fill-380-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) }
.cols-fit-380-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)) }
.cols-fill-385-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(385px, 1fr)) }
.cols-fit-385-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(385px, 1fr)) }
.cols-fill-390-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)) }
.cols-fit-390-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)) }
.cols-fill-395-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(395px, 1fr)) }
.cols-fit-395-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(395px, 1fr)) }
.cols-fill-400-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)) }
.cols-fit-400-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) }
.cols-fill-405-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(405px, 1fr)) }
.cols-fit-405-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(405px, 1fr)) }
.cols-fill-410-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(410px, 1fr)) }
.cols-fit-410-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(410px, 1fr)) }
.cols-fill-415-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(415px, 1fr)) }
.cols-fit-415-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(415px, 1fr)) }
.cols-fill-420-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) }
.cols-fit-420-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) }
.cols-fill-425-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(425px, 1fr)) }
.cols-fit-425-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(425px, 1fr)) }
.cols-fill-430-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)) }
.cols-fit-430-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)) }
.cols-fill-435-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(435px, 1fr)) }
.cols-fit-435-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(435px, 1fr)) }
.cols-fill-440-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)) }
.cols-fit-440-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)) }
.cols-fill-445-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(445px, 1fr)) }
.cols-fit-445-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(445px, 1fr)) }
.cols-fill-450-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)) }
.cols-fit-450-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)) }
.cols-fill-455-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(455px, 1fr)) }
.cols-fit-455-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(455px, 1fr)) }
.cols-fill-460-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)) }
.cols-fit-460-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)) }
.cols-fill-465-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(465px, 1fr)) }
.cols-fit-465-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(465px, 1fr)) }
.cols-fill-470-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(470px, 1fr)) }
.cols-fit-470-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(470px, 1fr)) }
.cols-fill-475-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(475px, 1fr)) }
.cols-fit-475-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(475px, 1fr)) }
.cols-fill-480-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)) }
.cols-fit-480-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)) }
.cols-fill-485-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(485px, 1fr)) }
.cols-fit-485-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(485px, 1fr)) }
.cols-fill-490-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(490px, 1fr)) }
.cols-fit-490-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(490px, 1fr)) }
.cols-fill-495-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(495px, 1fr)) }
.cols-fit-495-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(495px, 1fr)) }
.cols-fill-500-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)) }
.cols-fit-500-px
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)) }

Rows

.rows-1
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-rows: repeat(1, minmax(0, 1fr)) }
.rows-2
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-rows: repeat(2, minmax(0, 1fr)) }
.rows-3
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-rows: repeat(3, minmax(0, 1fr)) }
.rows-4
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-rows: repeat(4, minmax(0, 1fr)) }
.rows-5
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-rows: repeat(5, minmax(0, 1fr)) }
.rows-6
1
2
3
4
5
6
7
8
9
10
11
12
 
{ grid-template-rows: repeat(6, minmax(0, 1fr)) }

Positioning

Column Span

.col-span-1
col-span-1
 
{ grid-column: span 1/span 1 }
.col-span-2
col-span-2
 
{ grid-column: span 2/span 2 }
.col-span-3
col-span-3
 
{ grid-column: span 3/span 3 }
.col-span-4
col-span-4
 
{ grid-column: span 4/span 4 }
.col-span-5
col-span-5
 
{ grid-column: span 5/span 5 }
.col-span-6
col-span-6
 
{ grid-column: span 6/span 6 }
.col-span-7
col-span-7
 
{ grid-column: span 7/span 7 }
.col-span-8
col-span-8
 
{ grid-column: span 8/span 8 }
.col-span-9
col-span-9
 
{ grid-column: span 9/span 9 }
.col-span-10
col-span-10
 
{ grid-column: span 10/span 10 }
.col-span-11
col-span-11
 
{ grid-column: span 11/span 11 }
.col-span-12
col-span-12
 
{ grid-column: span 12/span 12 }

Column Start

.col-start-1
col-start-1
 
{ grid-column-start: 1 }
.col-start-2
col-start-2
 
{ grid-column-start: 2 }
.col-start-3
col-start-3
 
{ grid-column-start: 3 }
.col-start-4
col-start-4
 
{ grid-column-start: 4 }
.col-start-5
col-start-5
 
{ grid-column-start: 5 }
.col-start-6
col-start-6
 
{ grid-column-start: 6 }
.col-start-7
col-start-7
 
{ grid-column-start: 7 }
.col-start-8
col-start-8
 
{ grid-column-start: 8 }
.col-start-9
col-start-9
 
{ grid-column-start: 9 }
.col-start-10
col-start-10
 
{ grid-column-start: 10 }
.col-start-11
col-start-11
 
{ grid-column-start: 11 }
.col-start-12
col-start-12
 
{ grid-column-start: 12 }

Column End

.col-end-1
col-end-1
 
{ grid-column-end: 1 }
.col-end-2
col-end-2
 
{ grid-column-end: 2 }
.col-end-3
col-end-3
 
{ grid-column-end: 3 }
.col-end-4
col-end-4
 
{ grid-column-end: 4 }
.col-end-5
col-end-5
 
{ grid-column-end: 5 }
.col-end-6
col-end-6
 
{ grid-column-end: 6 }
.col-end-7
col-end-7
 
{ grid-column-end: 7 }
.col-end-8
col-end-8
 
{ grid-column-end: 8 }
.col-end-9
col-end-9
 
{ grid-column-end: 9 }
.col-end-10
col-end-10
 
{ grid-column-end: 10 }
.col-end-11
col-end-11
 
{ grid-column-end: 11 }
.col-end-12
col-end-12
 
{ grid-column-end: 12 }

Row Span

.row-span-1
row-span-1
 
{ grid-row: span 1/span 1 }
.row-span-2
row-span-2
 
{ grid-row: span 2/span 2 }
.row-span-3
row-span-3
 
{ grid-row: span 3/span 3 }
.row-span-4
row-span-4
 
{ grid-row: span 4/span 4 }
.row-span-5
row-span-5
 
{ grid-row: span 5/span 5 }
.row-span-6
row-span-6
 
{ grid-row: span 6/span 6 }

Row Start

.row-start-1
row-start-1
 
{ grid-row-start: 1 }
.row-start-2
row-start-2
 
{ grid-row-start: 2 }
.row-start-3
row-start-3
 
{ grid-row-start: 3 }
.row-start-4
row-start-4
 
{ grid-row-start: 4 }
.row-start-5
row-start-5
 
{ grid-row-start: 5 }
.row-start-6
row-start-6
 
{ grid-row-start: 6 }

Row End

.row-end-1
row-end-1
 
{ grid-row-end: 1 }
.row-end-2
row-end-2
 
{ grid-row-end: 2 }
.row-end-3
row-end-3
 
{ grid-row-end: 3 }
.row-end-4
row-end-4
 
{ grid-row-end: 4 }
.row-end-5
row-end-5
 
{ grid-row-end: 5 }
.row-end-6
row-end-6
 
{ grid-row-end: 6 }

Flow

.grid-flow-row
1
2
3
4
 
{ grid-auto-flow: row }
.grid-flow-row-dense
1
2
3
4
 
{ grid-auto-flow: row dense }
.grid-flow-col
1
2
3
4
 
{ grid-auto-flow: column }
.grid-flow-column-dense
1
2
3
4
 
{ grid-auto-flow: column dense }

Gap

.gap
1
2
3
4
 
{ gap: 1rem }
.gap-none
1
2
3
4
 
{ gap: 0 }
.gap-xs
1
2
3
4
 
{ gap: 0.8rem }
.gap-sm
1
2
3
4
 
{ gap: 0.9rem }
.gap-lg
1
2
3
4
 
{ gap: 1.2rem }
.gap-xl
1
2
3
4
 
{ gap: 1.4rem }
.gap-h
1
2
3
4
 
{ column-gap: 1rem }
.gap-h-none
1
2
3
4
 
{ column-gap: 0 }
.gap-h-xs
1
2
3
4
 
{ column-gap: 0.8rem }
.gap-h-sm
1
2
3
4
 
{ column-gap: 0.9rem }
.gap-h-lg
1
2
3
4
 
{ column-gap: 1.2rem }
.gap-h-xl
1
2
3
4
 
{ column-gap: 1.4rem }
.gap-v
1
2
3
4
 
{ row-gap: 1rem }
.gap-v-none
1
2
3
4
 
{ row-gap: 0 }
.gap-v-xs
1
2
3
4
 
{ row-gap: 0.8rem }
.gap-v-sm
1
2
3
4
 
{ row-gap: 0.9rem }
.gap-v-lg
1
2
3
4
 
{ row-gap: 1.2rem }
.gap-v-xl
1
2
3
4
 
{ row-gap: 1.4rem }

Alignment

Content Along Main Axes
.justify-content-start
1
2
3
4
 
{ justify-content: flex-start }
.justify-content-end
1
2
3
4
 
{ justify-content: flex-end }
.justify-content-center
1
2
3
4
 
{ justify-content: center }
.justify-content-between
1
2
3
4
 
{ justify-content: space-between }
.justify-content-around
1
2
3
4
 
{ justify-content: space-around }
.justify-content-evenly
1
2
3
4
 
{ justify-content: space-evenly }
Content Along Cross Axes
.align-content-start
1
2
3
4
 
{ align-content: flex-start }
.align-content-end
1
2
3
4
 
{ align-content: flex-end }
.align-content-center
1
2
3
4
 
{ align-content: center }
.align-content-between
1
2
3
4
 
{ align-content: space-between }
.align-content-around
1
2
3
4
 
{ align-content: space-around }
.align-content-evenly
1
2
3
4
 
{ align-content: space-evenly }
Items Along Main Axes
.justify-auto
1
2
3
4
 
{ justify-items: auto }
.justify-start
1
2
3
4
 
{ justify-items: start }
.justify-end
1
2
3
4
 
{ justify-items: end }
.justify-center
1
2
3
4
 
{ justify-items: center }
.justify-stretch
1
2
3
4
 
{ justify-items: stretch }
.justify-baseline
1
2
3
4
 
{ justify-items: baseline }
Items Along Cross Axes
.align-auto
1
2
3
4
 
{ align-items: auto }
.align-start
1
2
3
4
 
{ align-items: start }
.align-end
1
2
3
4
 
{ align-items: end }
.align-center
1
2
3
4
 
{ align-items: center }
.align-stretch
1
2
3
4
 
{ align-items: stretch }
.align-baseline
1
2
3
4
 
{ align-items: baseline;
vertical-align: baseline }

Individual Item

Item Along Main Axes
.grid .justify-auto
1
.justify-auto
3
 
{  }
.grid .justify-start
1
.justify-start
3
 
{  }
.grid .justify-end
1
.justify-end
3
 
{  }
.grid .justify-center
1
.justify-center
3
 
{  }
.grid .justify-stretch
1
.justify-stretch
3
 
{  }
Item Along Cross Axes
.grid .align-auto
1
1
.align-auto
3
 
{  }
.grid .align-start
1
1
.align-start
3
 
{  }
.grid .align-end
1
1
.align-end
3
 
{  }
.grid .align-center
1
1
.align-center
3
 
{  }
.grid .align-stretch
1
1
.align-stretch
3
 
{  }