Lección interactiva: Layout con CSS Grid

Esta lección está enfocada en la práctica.

Ya aprendiste las propiedades básicas de CSS Grid. Ahora las cambiarás directamente y verás cómo se mueven los grid items.

Qué practicarás

grid-template-columns cambia la estructura de columnas.
grid-template-rows cambia las alturas explícitas de las filas.
gap agrega espacio entre celdas del grid.
grid-column puede hacer que un elemento ocupe varias columnas.
Auto-placement coloca los elementos en la siguiente celda disponible del grid.

Prueba el playground interactivo

Usa los controles para cambiar el grid. Observa cómo se actualizan juntos la vista previa y el código CSS.

Playground de CSS Grid

Cambia la estructura del grid y observa cómo auto-placement llena las siguientes celdas disponibles.

grid-template-columns

grid-template-rows

gap

0px - 40px

Elementos

3 - 8

Primer y último elemento

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background-color: #f1f5f9;
}

.grid-item:first-child,
.grid-item:last-child {
  grid-column: 1 / -1;
}