freeCodeCamp

2.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
5a90376038fddaf9a66b5d3c	Align All Items Horizontally using justify-items	0		Alinear todos los elementos horizontalmente utilizando elementos justificados

Description

A veces desea que todos los elementos en su Cuadrícula de CSS compartan la misma alineación. Puede usar las propiedades aprendidas anteriormente y alinearlas individualmente, o puede alinearlas todas a la vez de forma horizontal mediante el uso justify-items en su contenedor de cuadrícula. Esta propiedad puede aceptar todos los valores que aprendió en los dos desafíos anteriores, con la diferencia de que moverá todos los elementos de nuestra cuadrícula a la alineación deseada.

Instructions

Utilice esta propiedad para centrar todos nuestros artículos horizontalmente.

Tests

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

2.2 KiB Raw Blame History