CSS Grid desde cero

¿Qué es CSS Grid?

CSS Grid Layout es un sistema de diseño bidimensional en CSS que permite definir filas y columnas de forma explícita, ofreciendo control total del layout sin recurrir a hacks.

¿Cómo funciona CSS Grid?

Cuando aplicas display: grid; (o inline-grid) a un contenedor, sus hijos directos se convierten en elementos de grid que se sitúan en pistas explícitas o pistas implícitas según tus definiciones.

Conceptos clave: contenedor de grid & elemento de grid

• Contenedor de grid: elemento con display: grid; o inline-grid.
• Elemento de grid: hijo directo del contenedor.
• Ejes:
  • El eje de filas (row axis) es horizontal.
  • El eje de columnas (column axis) es vertical.

Propiedades del contenedor

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  gap: 16px;
  grid-auto-flow: row;
}

• repeat: repite una definición de pista un número de veces o de forma automática.

  /* Equals to: 1fr 1fr 1fr */
  grid-template-columns: repeat(3, 1fr); 
  

• minmax: define el tamaño mínimo y máximo de una pista (track) grid.

  /* 100px is the minimum size and 1 fraction is the maximum size: it will grow taking all the remaining space */
  grid-template-columns: minmax(100px, 1fr); 
  

• grid-template-columns/rows: define tamaños de tracks (px, fr, %, auto).

• grid-template-areas: nombre y colocación de regiones.

• gap: espacio unificado entre filas y columnas.

• grid-auto-flow: controla ubicación en pistas implícitas.

• justify-content: alinea el contenedor de pistas a lo largo del eje inline (horizontal en LTR).

• align-content: alinea el contenedor de pistas a lo largo del eje block (vertical).

Propiedades de los elementos

.item {
  grid-column: 1 / span 2; /* span means take N tracks */
  grid-row: 2 / 3;
  justify-self: center;
  align-self: start;
  place-self: end stretch;
}

• grid-column / grid-row: abreviatura de start/end.
• justify-self / align-self: alineación por elemento.
• place-self: shorthand para ambos.

Unidad fr vs auto vs valor fijo

En CSS Grid elige la unidad de tamaño según el comportamiento deseado:

• fr (fractional unit): reparte el espacio sobrante en proporción. Ideal para diseños fluidos.
• auto: ajusta la pista al tamaño del contenido.
• Valor fijo (px, %, rem, etc.): tamaño rígido.

<div class="grid-fr-auto-fixed">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

.grid-fr-auto-fixed {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 100px auto;
  gap: 8px;
}
.box { background: #4a90e2; color: #fff; padding: 16px; text-align: center; }

Ejemplo básico

<div class="gallery">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
}
.item {
  background: #4a90e2;
  color: #fff;
  padding: 20px;
  text-align: center;
}

Pistas implícitas vs explícitas

/* Container without define tracks */
.wrapper {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-rows: 50px;
  gap: 8px;
}
.wrapper > div {
  /* Each new element creates a new track... */
}

• Explícitas: definimos con grid-template-....
• Implícitas: generadas automáticamente según grid-auto-....

auto-fill vs. auto-fit

Debes usar una combinación con minmax() y unidades flexibles, como fr o % y por, supuesto el escenario debe tener menos items que tracks disponibles.

• auto-fill: crea tracks vacíos cuando sobra espacio.
• auto-fit: colapsa tracks vacíos y estira items.

.grid-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.grid-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

Demo: colocación con líneas de Grid

<div class="layout-lines">
  <header>Header</header>
  <main>Main content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

.layout-lines {
  border: 1px solid;
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 1rem;
}
.layout-lines > * {
  background-color: lightgray;
}
.layout-lines > header {
  grid-column: 1 / -1;
}
.layout-lines > main {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.layout-lines > aside {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.layout-lines > footer {
  grid-column: 1 / -1;
  grid-row: 3 / 4;
}

Demo: uso de áreas de Grid

<div class="layout-areas">
  <header>Header</header>
  <nav>Navigation</nav>
  <article>Article body</article>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

.layout-areas {
	border: 1px solid;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "nav     article aside"
    "footer  footer  footer";
  gap: 16px;
  padding: 1rem;
}
.layout-areas > * {
  background-color: lightgray;
}
.layout-areas > header  { grid-area: header; }
.layout-areas > nav     { grid-area: nav; }
.layout-areas > article { grid-area: article; }
.layout-areas > aside   { grid-area: aside; }
.layout-areas > footer  { grid-area: footer; }

Comparativa vs Flexbox

Gotchas comunes

• Subgrid: solo Firefox soporta hoy.
• Margin collapse no aplica dentro de grids.

Recursos

• MDN: CSS Grid Layout
• CSS-Tricks: A Complete Guide to CSS Grid