HomeSugerenciasEjemplos
imagen

CSS Grid

Sitios "responsive" de forma nativa

Definiendo contenedores

/* Definición */
.container {
  display: grid | inline-grid | subgrid;
}

/* Ejemplo */
.container {
  display: grid;
}

display: grid
display: inline-grid
display: subgrid;

Definiendo Columnas y Filas

Columnas

Con grid-template-columns podemos definir la cantidad de columnas que tendra nuestro grid, el ancho y comportamiento de cada una.

  • longitud en px, vw, vh, em
  • Porcentaje del ancho total
  • fracción del espacio disponible
  • max-content
  • min-content
  • minmax(min, max)
  • repeat
  • fit-content
/* Definición */
/* Palabras claves */
grid-template-columns: none;

/* Valores definidos y nombres de lineas */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/* Valores automaticos y nombres de lineas  */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-columns:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

/* Global values */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;

Filas

/* Ejemplo 1*/
.container {
  display: grid;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

/* Ejemplo 2*/
.container {
  display: grid;
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

/*  Ejemplo 3 */
.container {
  display: grid;
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

auto-rows

A veces no sabemos cuantas rows necesitaremos y con css grid se irán agregando nuevas rows en la medida que el container lo requiera, con grid-auto-rows podemos definir el alto de estas rows

/* Definición */
/* Palabras claves */
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/* longitudes */
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/* porcentajes */
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/* fracciones */
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/* Valores minimos y máximos */
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/* multiples valores */
/* Firefox no trabajo bien con multiples valores */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-rows: inherit;
grid-auto-rows: initial;
grid-auto-rows: unset;

/* Ejemplo */
.container {
  grid-auto-rows: minmax(60px, auto);
}

Definiendo items

Para posicionar un item dentro del grid previamente definido, debemos entregarle 4 parametros, que hacen referencia a las grid lines tanto de columnas como filas. grid-colum : Nos permite definir posición y tamaño de cada item respecto a las columnas. grid-row : Nos permite definir posición y tamaño de cada item respecto a las filas.

/* Definición */
.item {
  grid-column: start-line / end-line;
  grid-row: start-line / end-line;
}

/* Column: Inicia en la linea 1 y termina en la linea 5
   Row: Inicia en la linea 1 y termina en la linea 2  */
.item {
  grid-column: 1 / 5;
  grid-row: 1 / 2;
}

/* Column: Inicia en la linea 2 y termina la útima linea
   Row: Inicia en la linea 1 y termina en la linea 2  */
.item {
  grid-column: 2 / -1;
  grid-row: 1 / 2;
}

/* Column: Inicia en la linea 2 y ocupa 4 columnas
   Row: Inicia en la linea 2 y se extiende hasta el final  */
.item {
  grid-column: 2 / span 4;
  grid-row: 2 / -1;
}

repeat

/* normal */
.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

/* usando repeat */
.container {
  grid-template-columns: repeat(3, 20px [col-start]) 5%;
}

Longitudes Flexibles (fr)

Longitud flexible, es una longitud con la unidad fr, la cual representa una fracción del espacio libre en el grid container csswg.com

/* Divide el espacio disponible en 3 columnas del mismo ancho */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* 
 Divide el espacio disponible en 3 columnas 
 - Columnas 1 y 2 del mismo ancho
 - Tercera columna del doble de ancho que la 1 y 2
*/
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
}

/* Divide el espacio disponible en 4 columnas, 1 de 50px y las 3 restantes del mismo ancho */
.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

Definiendo áreas

Espaciado gap

justify-items

align-items

Nos permite centrar verticalmente

justify-content

align-content