Twitter Facebook RSS Feed

Guía completa para aprender a utilizar CSS Grid Layout   (página 2 de 3)

0

jueves, 02 de mayo de 2019 a las 14:53hs por Valentina Echezuria

Superposición de celdas:

Con este método también podemos superponer celdas determinando la relevancia de cada uno mediante la propiedad z-index:

.one {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
  }
.two {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
  }

que seria lo mismo que:

.one{
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.two{
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

Resultado:

Denominando áreas de grilla

La propiedad grid-template-areas permite ponerle nombres a cada una de las celdas, determinado el espacio que ocuparan y la ubicación de estas. Podemos emplearlas de la siguiente manera:

<div class="contenedor">
      <div class="header">HEADER</div>
      <div class="sidebar">SIDEBAR</div>
      <div class="main">MAIN/div>
      <div class="footer">FOOTER</div>
</div>
.contenedor{
    display: grid;
    height: 98vh;
    grid-template-areas: "header header"
                         "siderbar  main"
                         "footer  footer";
    grid-template-rows: 80px 1fr 80px;
    grid-template-columns: 300px 1fr;
}

.header{
  grid-area: header;
}

.siderbar{
  grid-area: siderbar;
}

.main{
  grid-area: main;
}

.footer{
  grid-area: footer;
}

Repetir columnas y filas utilizando la propiedad repeat()

La propiedad repeat () representa un fragmento repetido de la lista de pistas, lo que permite escribir un gran número de columnas o filas que exhiben un patrón recurrente en una forma más compacta.

Por ejemplo:

grid-template-columns: 1fr 1fr 1fr;

seria igual a:

grid-template-columns: repeat(3, 1fr);

y:

grid-template-columns: 2fr 2fr  2fr 1fr 1fr 1fr;

seria igual a:

grid-template-columns: repeat(3, 2fr 1fr);

Propiedad minmax

Podemos establecer mediante esta propiedad el tamaño mínimo y máximo de las filas y columnas, previendo los cambios que tendrá el objeto al reducirse o ampliarse el tamaño de la pantalla.

Por ejemplo

.contenedor{
   display: grid;
   grid-template-columns:minmax(100px, 200px) 1fr 1fr;
}

También podemos establecer valores en otras unidades de medidas flexibles:

grid-template-columns:minmax(20%, 40%) 1fr 1fr;

Espaciado entre filas y columnas (grid-gap)

Con esta propiedad definiremos el espaciado que habrá entre las filas y columnas, pudiendo ser especificadas en pixeles o porcentaje.

Si se quiere que las medidas asignadas apliquen tanto a filas como columnas se puede usar la propiedad grid-gap:

.contenedor {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}

grid-auto-flow: row / column

Tal como la propiedad que tiene flex de dirigir la disposición que tendrán los items (ya sea en filas o en columnas), grid tiene la propiedad grid-auto-flow:

grid-auto-flow: row

grid-auto-flow: column

0 comentarios »

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Buscar