Skip to content

Hoja de Referencia de Diseño CSS Grid

Esta página proporciona una hoja de referencia visual para el diseño CSS Grid, incluyendo propiedades principales para contenedores y elementos de cuadrícula, junto con ejemplos prácticos de maquetación.

Contenedor de Cuadrícula (Grid Container)

Propiedad Valor Descripción
display grid Define el elemento como un contenedor de cuadrícula
grid-template-columns 100px 1fr Define el ancho de las columnas
grid-template-rows 100px 1fr Define el alto de las filas
grid-template-areas header header
sidebar main
footer footer		 Define la cuadrícula nombrando áreas
grid-column-gap 10px Define el espacio entre columnas
grid-row-gap 10px Define el espacio entre filas
grid-gap 10px 20px Define simultáneamente el espacio entre filas y columnas
justify-items start Alinea horizontalmente los elementos de la cuadrícula dentro de sus celdas
align-items start Alinea verticalmente los elementos de la cuadrícula dentro de sus celdas
justify-content start Alinea horizontalmente toda la cuadrícula dentro del contenedor
align-content start Alinea verticalmente toda la cuadrícula dentro del contenedor

Elementos de Cuadrícula (Grid Items)

Propiedad Valor Descripción
grid-column 1 / 3 Define las columnas que abarca el elemento
grid-row 1 / 3 Define las filas que abarca el elemento
grid-area header Coloca elementos de cuadrícula nombrando áreas
justify-self start Alinea horizontalmente un elemento individual dentro de su celda
align-self start Alinea verticalmente un elemento individual dentro de su celda
grid-column-start 1 Define la línea de inicio de la columna
grid-column-end 3 Define la línea final de la columna
grid-row-start 1 Define la línea de inicio de la fila
grid-row-end 3 Define la línea final de la fila

Ejemplo de Media Query 

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Otros Ejemplos

Diseño de dos columnas 

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

Diseño de tres columnas 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Centrado vertical 

.container {
  display: grid;
  align-items: center;
}

Centrado horizontal 

.container {
  display: grid;
  justify-items: center;
}