freeCodeCamp

1.8 KiB

Raw Blame History

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

Description

El 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

// solution required

1.8 KiB Raw Blame History