+50 XP
Lesson 53 • Module 6: CSS Grid

Grid Columns

Define columns with grid-template-columns

📊

Defining Columns

Columns go from left to right. Let's learn how to create them!

grid-template-columns

This property tells the grid how many columns to create and how wide they should be!

📄 css
1
2
3
4
.container {  display: grid;  grid-template-columns: 200px 200px 200px;}

Result: 3 columns, each 200px wide

1
2
3
4
5
6

💡 Each value creates one column. Three values = three columns!