¿Ya dominas lo básico? Un curso estructurado de HTML & CSS es la vía rápida para dar el salto.

Enlace de afiliado. No te cuesta nada extra.

🎨Lecciones de HTML & CSS

Lección 12 / 50

Maquetar con CSS Grid

En esta lección colocarás elementos en una rejilla de filas y columnas, la herramienta ideal para galerías y cuadrículas de tarjetas.

Con display: grid el contenedor pasa a organizar a sus hijos en una cuadrícula. grid-template-columns define las columnas: repeat(3, 1fr) significa «tres columnas de igual tamaño». La unidad fr (fracción) reparte el espacio disponible, así que 1fr 2fr daría una columna del doble de ancho que la otra.

En el código de ejemplo hay seis div dentro de una rejilla de tres columnas, así que se acomodan solos en dos filas. Cambia el 3 por un 2 y observa cómo se reorganizan en tres filas sin tocar el HTML.

La confusión más frecuente es no distinguir Grid de Flexbox. La regla práctica: Flexbox para una sola dirección (una fila o una columna) y Grid cuando controlas filas y columnas a la vez.

En el trabajo real, Grid se usa para la estructura general de la página y para cuadrículas de contenido; Flexbox, para los componentes de dentro. Combinarlos así es hoy el enfoque estándar.

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .grid div {
    background: #33e6a0;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
  }
</style>

<div class="grid">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

SALIDA

💡 La vista previa se genera por completo en esta página; no se envía nada al exterior.