---
id: 5a9036d038fddaf9a66b5d32
title: Add Columns with grid-template-columns
localeTitle: Añadir columnas con cuadrícula-plantilla-columnas
challengeType: 0
videoUrl: ''
---
## Description
Simplemente crear un elemento de cuadrícula no te lleva muy lejos. También es necesario definir la estructura de la cuadrícula. Para agregar algunas columnas a la cuadrícula, use la propiedad grid-template-columns
en un contenedor de cuadrícula como se muestra a continuación:
.container {
display: grid;
grid-template-columns: 50px 50px;
}
Esto le dará a su cuadrícula dos columnas de 50px de ancho cada una.
El número de parámetros dados a la propiedad grid-template-columns
indica el número de columnas en la cuadrícula, y el valor de cada parámetro indica el ancho de cada columna.
## Instructions
Déle al contenedor de la cuadrícula tres columnas de 100px
ancho cada una.
## Tests
```yml
tests:
- text: container
clase container
debe tener una propiedad de grid-template-columns
con tres unidades de 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;}"
```