freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.spanish.md

id, title, localeTitle, challengeType, videoUrl

id	title	localeTitle	challengeType	videoUrl
5a94fdf869fb03452672e45b	Align All Items Vertically using align-items	Alinear todos los elementos verticalmente utilizando elementos de alineación	0

Description

uso de la propiedad align-items en un contenedor de cuadrícula establecerá la alineación vertical para todos los elementos en nuestra cuadrícula.

Instructions

Úselo ahora para mover todos los elementos al final de cada celda.

Tests

tests:
  - text: <code>container</code> clase <code>container</code> debe tener una propiedad <code>align-items</code> que tenga el valor de <code>end</code> .
    testString: 'assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.");'

Challenge Seed

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}

  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    /* add your code below this line */


    /* add your code above this line */
  }
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

Solution

var code = ".container {align-items: end;}"