CSS CSS Grid

Layout bidimensional. Controla filas y columnas al mismo tiempo.

Grid Playground Interactivo

Cambia las propiedades del grid y observa la distribución. Incluye fr, repeat(), minmax(), auto-fill.

1 col-span:2
2
3
4
5
6
.grid { display: grid; }
grid-column · grid-row · span Placement

Controlan exactamente qué celdas ocupa cada ítem con líneas de grid (1/3) o span N.

col 1/3
row 1/3
auto
col 1/3
grid-template-areas Layout

Layout visual con nombres de área como un "mapa ASCII" en el CSS.

header
sidebar
main
footer
grid-auto-flow · dense Auto-placement

Controla cómo el algoritmo de auto-placement coloca los ítems. dense rellena huecos con ítems más pequeños.

span 2
1
span 3
rellena
el
hueco
grid-auto-flow: row          /* default */
grid-auto-flow: column
grid-auto-flow: row dense    /* rellena huecos */
grid-auto-flow: column dense
Líneas nombradas Naming

Asigna nombres a las líneas del grid con corchetes []. Hace el código más legible y mantenible que usar números de línea.

/* Definición con nombres */
grid-template-columns:
  [start] 200px
  [content-start] 1fr
  [content-end aside-start] 240px
  [aside-end end];

/* Uso semántico */
.main    { grid-column: content-start / content-end; }
.aside   { grid-column: aside-start / aside-end; }
.full    { grid-column: start / end; }

/* Múltiples nombres por línea */
grid-template-rows:
  [header-top] 60px [header-bottom main-top] 1fr
  [main-bottom footer-top] 50px [footer-bottom];
subgrid Moderno

Un elemento hijo puede heredar las líneas del grid padre con subgrid. Permite alinear elementos nietos con el grid raíz.

Col 1
Sub A
Sub B
.parent { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.child  {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid; /* hereda 2 columnas */
}
grid-template-areas — Layout builder Interactivo

El layout de página más expresivo de CSS: define zonas con nombres y asigna elementos. El "mapa ASCII" del CSS.

Selecciona un layout:

header
sidebar
main

                

              

            

          


          

            

              grid-auto-columns · grid-auto-rows
              Implícito
            

            
Define el tamaño de filas/columnas creadas implícitamente (ítems que sobrepasan el grid explícito). minmax() es la combinación ideal.

            

              
/* Grid explícito: 3 columnas, 1 fila */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  /* rows extra siempre ≥100px pero crecen con el contenido */
}

/* Solo columnas implícitas */
.list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px; /* cada columna = 200px */
}