← HTML + CSS Fundamentals

Cuadrículas bidimensionales

Grid controla filas y columnas a la vez. Define columnas con grid-template-columns; la unidad fr reparte el espacio disponible y gap separa celdas.

repeat() evita repeticiones y minmax() permite cuadrículas adaptables. repeat(auto-fit, minmax(220px, 1fr)) crea tantas columnas como quepan.

Un elemento puede ocupar más espacio con grid-column: span 2. En galerías, object-fit: cover rellena el área de una imagen sin deformarla, aunque recorte parte del contenido.

01

CSS Grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
Ahora te toca a ti
Usa lo que acabas de aprender.
Empezar ejercicios →