Unidad 5 - Maquetación moderna

CSS moderno incorpora sistemas avanzados de maquetación capaces de construir interfaces complejas de forma sencilla. En esta unidad se estudian Grid Layout y Flexbox, dos herramientas esenciales del desarrollo web actual.

5.1 El módulo Grid Layout – Diseño con rejillas

display:grid layout

CSS Grid permite crear estructuras bidimensionales organizadas en filas y columnas. Es uno de los sistemas de maquetación más potentes del lenguaje CSS.

Activar Grid

.container{ display:grid; }

Ventajas de Grid

  • Control total sobre filas y columnas.
  • Diseños complejos fácilmente.
  • Responsive sencillo.
  • Mejor organización visual.
  • Compatible con Flexbox.

Ejemplo básico

.container{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
Grid trabaja en dos dimensiones: horizontal y vertical.

Mini-test

1. ¿Qué propiedad activa Grid Layout?

5.2 Grid - Lines, Cell, Tracks, Area, Gaps

Grid Concepts

Grid se basa en conceptos fundamentales que permiten entender su funcionamiento.

Concepto Descripción
Lines Líneas que separan filas y columnas.
Cell Celda individual.
Track Espacio entre líneas.
Area Conjunto de celdas.
Gap Separación entre elementos.

Ejemplo visual

.container{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:100px 100px; }
Comprender tracks y áreas es esencial para dominar Grid.

Mini-test

1. ¿Cómo se llama una celda individual?

5.3 grid-template-columns y grid-template-rows

columns rows

Definen el tamaño y número de columnas y filas.

Columnas

grid-template-columns: 200px 1fr 2fr;

Filas

grid-template-rows: 100px auto 200px;

Unidad fr

fr significa fracción del espacio disponible.

grid-template-columns: 1fr 1fr 1fr;
La unidad fr facilita layouts responsive.

Mini-test

1. ¿Qué unidad representa fracciones?

5.4 row-gap y column-gap

gap

Permiten separar filas y columnas.

.container{ row-gap:20px; column-gap:30px; }

Forma resumida

gap:20px;
gap:20px 40px;
gap también funciona con Flexbox moderno.

Mini-test

1. ¿Qué propiedad separa columnas?

5.5 grid-auto-flow, grid-auto-columns y grid-auto-rows

auto-flow

Estas propiedades controlan elementos generados automáticamente.

grid-auto-flow

grid-auto-flow:row;

grid-auto-columns

grid-auto-columns:150px;

grid-auto-rows

grid-auto-rows:100px;

Valores comunes

  • row
  • column
  • dense
dense intenta rellenar huecos automáticamente.

Mini-test

1. ¿Qué propiedad controla flujo automático?

5.6 grid-template-areas y grid-area

areas

Permiten nombrar zonas completas del layout.

.container{ display:grid; grid-template-areas: "header header" "menu content" "footer footer"; }

Asignar áreas

header{ grid-area:header; } main{ grid-area:content; }
Las áreas hacen los layouts más legibles.

Mini-test

1. ¿Qué propiedad asigna una zona?

5.7 justify-content

justify-content

Alinea el contenido horizontalmente dentro del contenedor.

justify-content:center;

Valores comunes

  • center
  • start
  • end
  • space-between
  • space-around

Mini-test

1. ¿Qué valor centra contenido?

5.8 FlexBox Layout

flexbox

Flexbox organiza elementos en una sola dimensión.

.container{ display:flex; }

Ventajas

  • Alineación sencilla.
  • Distribución automática.
  • Responsive rápido.
  • Ideal para componentes UI.
Flexbox trabaja en un eje principal.

Mini-test

1. ¿Qué activa Flexbox?

5.9 Flexbox - flex-direction

flex-direction

Define dirección principal de elementos flexibles.

flex-direction:row;

Valores

  • row
  • row-reverse
  • column
  • column-reverse
.container{ display:flex; flex-direction:column; }

Mini-test

1. ¿Qué valor organiza verticalmente?

5.10 Flexbox - flex-wrap

flex-wrap

Permite que elementos pasen a otra línea.

flex-wrap:wrap;

Valores

  • nowrap
  • wrap
  • wrap-reverse
nowrap es el valor por defecto.

Mini-test

1. ¿Qué valor permite salto de línea?

5.11 Flexbox - flex-flow

flex-flow

Combina flex-direction y flex-wrap.

flex-flow:row wrap;
flex-flow simplifica código Flexbox.

Mini-test

1. ¿Qué combina flex-flow?

5.12 Flexbox - justify-content

justify-content

Alinea elementos sobre el eje principal.

justify-content:space-between;

Valores importantes

  • center
  • space-between
  • space-around
  • space-evenly

Mini-test

1. ¿Qué valor separa extremos?

5.13 Flexbox - align-items

align-items

Alinea elementos sobre el eje secundario.

align-items:center;

Valores

  • stretch
  • center
  • flex-start
  • flex-end
stretch es el valor por defecto.

Mini-test

1. ¿Qué propiedad alinea en eje secundario?

5.14 Flexbox - order, align-self, flex-grow y flex-shrink

flex-grow order

Estas propiedades modifican comportamiento individual.

order

.item{ order:2; }

align-self

.item{ align-self:flex-end; }

flex-grow

.item{ flex-grow:1; }

flex-shrink

.item{ flex-shrink:0; }
Propiedad Función
order Cambia orden visual
align-self Alineación individual
flex-grow Expansión disponible
flex-shrink Reducción disponible
flex-grow distribuye espacio sobrante proporcionalmente.

Mini-test

1. ¿Qué propiedad permite crecer?

Unidad 5 completada 🚀