---
id: 5a9036d038fddaf9a66b5d32
title: Add Columns with grid-template-columns
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv'
---
## Description
Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the grid-template-columns
property on a grid container as demonstrated below:
.container {
display: grid;
grid-template-columns: 50px 50px;
}
This will give your grid two columns that are 50px wide each.
The number of parameters given to the grid-template-columns
property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.
## Instructions
Give the grid container three columns that are 100px
wide each.
## Tests
```yml
tests:
- text: container
class should have a grid-template-columns
property with three units of 100px
.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi), 'container
class should have a grid-template-columns
property with three units of 100px
.');
```
## Challenge Seed
## Solution
```js
var code = ".container {grid-template-columns: 100px 100px 100px;}"
```