CSS Grid Cheat Sheet

grid-column

1
2
3
4
5
6
.box:first-child {
	grid-column: 1 / 3;
}
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);

display: grid

1
2
3
display: grid;

grid-template-columns

1
2
3
grid-template-columns: 50px 60px 120px;

grid-template-rows

1
2
3
grid-template-rows: 50px 60px 80px;

grid-template-columns, rows

1
2
3
4
5
6
grid-template-rows: 50px 100px;
grid-template-columns: 50px 100px 150px;

fr

1
2
3
grid-template-rows: 50px 60px 1fr;
1
2
3
grid-template-columns: 50px 80px 1fr;
1
2
3
4
5
6
grid-template-rows: 50px 1fr;
grid-template-columns: 150px 1fr 20%;
1
2
3
4
5
6
grid-template-columns: 1fr 2fr 3fr 4fr 5fr 6fr;

auto

1
2
3
grid-template-rows: 50px 60px auto;
1
2
3
grid-template-columns: 50px 80px auto;
1
2
3
4
5
6
grid-template-rows: 50px auto;
grid-template-columns: 150px auto 20%;

fr, auto

1
2
3
grid-template-rows: 50px auto 1fr;
1
2
3
grid-template-columns: 50px auto 1fr;
1
2
3
4
5
6
grid-template-rows: 1fr auto;
grid-template-columns: 150px auto 1fr;

repeat

1
2
3
4
5
6
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 50px);
1
2
3
4
5
6
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);

minmax

1
2
3
4
5
6
grid-template-columns: repeat(4, minmax(100px, 1fr));

auto-fill

1
2
3
4
5
6
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

auto-fit

1
2
3
4
5
6
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

grid-row-gap

1
2
3
4
5
6
grid-row-gap: 2rem;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);

grid-column-gap

1
2
3
4
5
6
grid-column-gap: 2rem;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);

grid-gap

1
2
3
4
5
6
grid-gap: 1rem 2rem;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);

justify-content

1
2
3
4
5
6
justify-content: start;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
justify-content: center;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
justify-content: end;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
justify-content: space-around;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
justify-content: space-between;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
justify-content: space-evenly;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);

justify-items

1
2
3
4
5
6
justify-items: start;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
justify-items: center;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
justify-items: end;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);

align-content

1
2
3
4
5
6
align-content: start;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
align-content: center;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
align-content: end;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
align-content: space-around;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
align-content: space-between;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
align-content: space-evenly;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);

align-items

1
2
3
4
5
6
align-items: start;
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
align-items: center;
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
align-items: end;
grid-template-columns: repeat(3, 100px);

grid-column

1
2
3
4
5
6
.box:first-child {
	grid-column: 1 / 3;
}
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
.box:first-child {
	grid-column: 1 / 4;
}
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
.box:first-child {
	grid-column: 1 / span 2;
}
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
.box:first-child {
	grid-column: 2 / span 2;
}
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
.box:first-child {
	grid-column: 1 / -1;
}
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);

grid-row

1
2
3
4
5
6
.box:first-child {
	grid-row: 1 / 3;
}
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
.box:first-child {
	grid-row: 1 / 4;
}
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
.box:first-child {
	grid-row: 1 / span 2;
}
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
.box:first-child {
	grid-row: 2 / span 2;
}
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);
1
2
3
4
5
6
.box:first-child {
	grid-row: 1 / -1;
}
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(3, 100px);