Twitter Facebook RSS Feed

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

0

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

Empezando a utilizar Grid

A diferencia de Flexbox que sirve para posicionamientos en una sola dimensión, el posicionamiento en Grid permite la disposición de elementos en 2 dimensiones, logrando establecer los valores o espacios que ocuparan los elementos dentro de una composición.

 

 

Contenedor con grid

Para activar la cuadrícula grid hay que determinar sobre el elemento contenedor la propiedad display y especificar el valor grid o inline-grid. Este valor determina como se comportará la cuadrícula con el contenido exterior. El primero permite que la cuadrícula aparezca encima/debajo del contenido exterior (en bloque) y el segundo de ellos permite que la cuadrícula se muestre de izquierda/derecha (en línea) del contenido exterior.


<div class="contenedor">
 <div class="item">ITEM 1</div>
 <div class="item">ITEM 2</div>
 <div class="item">ITEM 3</div>
 <div class="item">ITEM 4</div>
 <div class="item">ITEM 5</div>
 <div class="item">ITEM 6</div>
</div>
  .contenedor{
    display: grid;
  }

 .item{
    background-color: #b4b8b9;
    border: 1px solid #ffffff;
    padding: 1rem;
    font-family: arial;
    color: white;
    text-align: center;
  }

Resultado:

Establecer los valores

Podemos observar que la disposición de los elementos no ha cambiado porque no hemos definido el numero de columnas que deberá ocupar nuestra grilla, esto lo podemos definir utilizando la propiedad grid-template-columns en distintas maneras:

Utilizando la unidad de medida fr, que permite establecer la cantidad de espacio que ocupara un elemento dentro del área disponible , es decir , 1 fr es igual a una parte del espacio disponible, de esta manera podemos definir el espacio de ocupara cada elemento y la cantidad de columnas que tendrá el espacio.

Por ejemplo:

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

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

En este caso la primera columna ocupara 2 veces mas que el resto de las columnas.
Esta medida puede ser utilizada en unión con unidades de medidas fijas como px:

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

Las medidas de la primera columna serán absolutas mientras que las que estén establecidas en fr serán flexibles.

.contenedor{
    display: grid;
    grid-template-columns: 200px 2fr 1fr;
    height: 500px;
  }

 .item{
    background-color: #b4b8b9;
    border: 1px solid #ffffff;
    padding: 1rem;
    font-family: arial;
    color: white;
    text-align: center;
  }

Resultado:

Vista de la grilla:

Definiendo el numero de filas que tendrá nuestra grilla:

Determinaremos el numero de filas utilizando la propiedad grid-template-rows que puede ser utilizado igual que grid-template-columns, definiendolo en fr o medidas como px, rem, em vh o vw.

grid-template-rows: 1fr 1fr 1fr;

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

Ejemplo:

 <div class="item">ITEM 1</div>
 <div class="item">ITEM 2</div>
 <div class="item">ITEM 3</div>
 <div class="item">ITEM 4</div>
 <div class="item">ITEM 5</div>
 <div class="item">ITEM 6</div>
 .contenedor{
    display: grid;
    height: 100vh; /*ocupa el alto de la pantalla*/
    grid-template-columns: repeat(3, 1fr); /*los elementos ocuparan 3 columnas*/
    grid-template-rows: repeat(2, 1fr);  /*los elementos ocuparan 2 filas*/
  }

 .item{
    border: 3px solid #ffffff;
    padding: 1rem;
    font-family: arial;
    color: white;
    text-align: center;
    background: linear-gradient(135deg, rgb(97, 234, 222) 0%, rgb(30, 168, 255) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
 }

Resultado:

Si aumentáramos la propiedad grid-template-rows: repeat(3, 1fr); a tres filas el resultado seria:

También podremos establecer que algunas filas ocupen mayor espacio que otras

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

A parte de poder establecer el numero de columnas y filas y del espacio que ocuparan cada una de ellas, también podremos establecer estos valores en cada celda individual, incluso superponiendo celdas con otras, esto lo podemos lograr con las propiedades:

-grid-column-start: el lugar de inicio entre las columnas que ocupara esta celda o item.
-grid-column-end el lugar final entre las columnas que ocupara esta celda o item.
-grid-row-start: el lugar de inicio entre las filas que ocupara esta celda o item.
-grid-row-end el lugar final entre las filas que ocupara esta celda o item.

Por ejemplo, si establecimos que los valores de grid-template-columns: serian : 1fr 1fr 1fr 1fr; y los de
grid-template-rows: serian: 1fr 1fr 1fr:

<div class="contenedor">
      <div class="item one">ITEM 1</div>
      <div class="item two">ITEM 2</div>
      <div class="item">ITEM 3</div>
      <div class="item">ITEM 4</div>
      <div class="item">ITEM 5</div>
      <div class="item">ITEM 6</div>
      <div class="item">ITEM 7</div>
      <div class="item">ITEM 8</div>
      <div class="item">ITEM 9</div>
</div>
.contenedor{
    display: grid;
    grid-template-columns:  1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.one {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

0 comentarios »

Deja un comentario

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

Buscar