Grid Classes

Bellow is a Demonstration of How Grid Class Works

grid-template-columns: 1 column
Single column layout
1
2
3
grid-template-columns: 2 columns
Two equal-width columns
1
2
3
4
grid-template-columns: 3 columns
Three equal-width columns
1
2
3
4
5
6
grid-template-columns: 4 columns
Four equal-width columns
1
2
3
4
5
6
7
8
grid-template-columns: 6 columns
Six equal-width columns
1
2
3
4
5
6
grid-template-columns: 12 columns
Twelve-column grid (common for layouts)
1
2
3
4
5
6
7
8
9
10
11
12
grid-template-rows: 1 row (default)
Implicit rows created as needed
1
2
3
4
5
6
grid-template-rows: 2 rows
Two explicit rows with equal height
1
2
3
4
5
6
grid-template-rows: 3 rows
Three explicit rows with equal height
1
2
3
4
5
6
Combined: 4 columns × 3 rows
Explicit grid with both columns and rows defined
1
2
3
4
5
6
7
8
9
10
11
12
Important Notes
  • grid-template-columns defines the number and size of columns
  • grid-template-rows defines the number and size of rows
  • Fractional units (fr) distribute available space proportionally
  • minmax(0, 1fr) ensures columns/rows can shrink to zero
  • Implicit grid tracks are created for items that don't fit the explicit grid
  • Use gap to control spacing between grid items