CSS grid - Crea cuadrículas (grids) dentro de cuadrículas

Español HTML-CSS
1

Cuéntanos qué está pasando:
hola estimada comunidad por favor tengo una gran duda con la manera que va la propiedad: grid-template-columns. cualquier tipo de ayuda para resolver mi duda sera muy util.

Tu código hasta el momento

<style>
  .container {
    font-size: 1.5em;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
      "advert header"
      "advert content"
      "advert footer";
  }
  .item1 {
    background: LightSkyBlue;
    grid-area: header;
  }

  .item2 {
    background: LightSalmon;
    grid-area: advert;
  }

  .item3 {
    background: PaleTurquoise;
    grid-area: content;
    /* Cambia solo el código debajo de esta línea */
    grid-template-columns: (auto 1fr;)
    display: grid;

    /* Cambia solo el código encima de esta línea */
  }

  .item4 {
    background: lightpink;
    grid-area: footer;
  }

  .itemOne {
    background: PaleGreen;
  }

  .itemTwo {
    background: BlanchedAlmond;
  }

</style>

<div class="container">
  <div class="item1">header</div>
  <div class="item2">advert</div>
  <div class="item3">
    <div class="itemOne">paragraph1</div>
    <div class="itemTwo">paragraph2</div>
  </div>
  <div class="item4">footer</div>
</div>

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Desafío: CSS grid - Crea cuadrículas (grids) dentro de cuadrículas

Enlaza al desafío:

2

Hola! Espero poder ser de ayuda.
grid-template-columnn es una propiedad de CSS que te permite ajustar el numero de columnas y sus anchos en un contenedor de tipo grid.
Podes pensarlo de la siguiente manera:

grid-template-column: ancho-col1 ancho-col2 ancho-col3 ... ;

La unidad fr si no me equivoco es abreviacion de fraction o fraccion en español. Lo que hace es tomar el espacio dentro del contenedor y fraccionarlo justamente entre la cantidad de columnas y las dimensiones especificadas. Mientras que auto simplemente toma el espacio remanente entre un maximo y un minimo.

Te dejo un link que a mi me ayudo mucho:

1 Like
3

gracias, haz sido de gran ayuda.