freeCodeCamp

2.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
5a94fe1369fb03452672e45d	Place Items in Grid Areas Using the grid-area Property	0		Colocar elementos en áreas de cuadrícula utilizando la propiedad de área de cuadrícula

Description

Después de crear una plantilla de áreas para su contenedor de cuadrícula, como se muestra en el desafío anterior, puede colocar un elemento en su área personalizada haciendo referencia al nombre que le dio. Para hacer esto, usa la propiedad de grid-area en un elemento como este:

.item1 {grid-area: header; }

Esto le permite a la cuadrícula saber que desea que la clase item1 vaya en el área llamada header . En este caso, el elemento utilizará toda la fila superior porque toda esa fila se denomina área de encabezado.

Instructions

Coloque un elemento con la clase item5 en el área del footer usando la propiedad del grid-area la grid-area .

Tests

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

Challenge Seed

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

  .item5 {
    background: PaleGreen;
    /* add your code below this line */


    /* add your code above this line */
  }

  .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;
    grid-template-areas:
      "header header header"
      "advert content content"
      "footer footer footer";
  }
</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.5 KiB Raw Blame History