Recetas de layout

Patrones que resuelven los problemas más frecuentes del día a día. Elige una receta, cópiala y adáptala a tu proyecto.

center: centra cualquier elemento en ambos ejes con dos líneas de código.
holy grail: cabecera, navegación, contenido, lateral y pie, en una sola cuadrícula.
sidebar: barra lateral de ancho fijo y contenido que ocupa el resto.
sticky footer: el pie queda abajo aunque haya poco contenido.
card grid: tarjetas responsivas sin media queries.

Ejemplo

Selecciona una receta. El HTML y el CSS se actualizan a la vez, y puedes seguir editándolos para adaptarlos.

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="child">centered</div>
</div>

<div class="container">
  <div class="child">centered</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  height: 16rem;
  place-items: center;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  height: 16rem;
  place-items: center;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

Edita el código o usa los selectores: el resultado cambia al instante.