2.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
5a94fe1369fb03452672e45d	Ubica elementos en áreas de cuadrícula usando la propiedad grid-area	0	https://scrimba.com/p/pByETK/cRrqmtV	301132	place-items-in-grid-areas-using-the-grid-area-property

--description--

Después de crear una plantilla de área para tu contenedor de cuadrícula (grid), cómo se muestra en el desafío anterior, puedes ubicar un elemento en tu área personalizada referenciando el nombre que le diste. Para hacer esto, usa la propiedad grid-area sobre un elemento así:

.item1 {
  grid-area: header;
}

Esto le dice a la cuadrícula que quieres que la clase item1 se ubique en el área llamada header. En este caso, el elemento usará la totalidad de la fila superior porque esa área se llama header.

--instructions--

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

--hints--

La clase item5 debe tener una propiedad grid-area que tenga como valor footer.

assert(
  __helpers
    .removeCssComments(code)
    .match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi)
);

--seed--

--seed-contents--

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

  .item5 {
    background: PaleGreen;
    /* Only change code below this line */


    /* Only change 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>

--solutions--

<style>.item5 {grid-area: footer;}</style>

2.0 KiB Raw Blame History