Guía complementaria Clase 6 - CSS: Flexbox, Grid y diseño responsive

1. Introducción

En esta clase trabajamos una parte central del desarrollo Front-End: la maquetación de interfaces web.

Hasta ahora vimos cómo construir una página con HTML y cómo aplicarle estilos básicos con CSS: colores, tipografías, márgenes, bordes, padding y box model.

Pero una página web real no se compone de elementos aislados. Normalmente tiene:

• encabezado;

• menú;

• secciones;

• tarjetas;

• botones;

• columnas;

• formularios;

• pie de página;

• contenido que debe adaptarse a distintos dispositivos.

Para resolver eso necesitamos herramientas de layout o maquetación.

En CSS moderno, las herramientas principales para organizar elementos son:

• Flexbox

• CSS Grid

• Media queries

• Diseño responsive

2. ¿Qué significa maquetar una página web?

Maquetar significa ordenar visualmente los elementos de una página.

No se trata solamente de “decorar” una página. Maquetar implica tomar decisiones como:

• qué elemento aparece arriba;

• qué elemento aparece abajo;

• qué elementos van uno al lado del otro;

• cuánto espacio hay entre secciones;

• cómo se alinean los elementos;

• cómo se comporta el diseño en pantallas chicas;

• cómo se evita que el contenido se rompa o quede cortado.

Por ejemplo, este HTML por sí solo no define una distribución visual compleja:

<section>
  <article>Tarjeta 1</article>
  <article>Tarjeta 2</article>
  <article>Tarjeta 3</article>
</section>

Sin CSS, los elementos probablemente se vean uno debajo del otro.

Con CSS podemos decidir que se vean así:

Tarjeta 1 | Tarjeta 2 | Tarjeta 3

O así:

Tarjeta 1
Tarjeta 2
Tarjeta 3

La estructura la define HTML.
La distribución visual la define CSS.

3. HTML estructura, CSS organiza

HTML responde a la pregunta:

¿Qué contenido tiene la página?

CSS responde a la pregunta:

¿Cómo se ve y cómo se acomoda ese contenido?

Ejemplo:

<main class="contenedor">
  <section class="tarjeta">
    <h2>HTML</h2>
    <p>Sirve para estructurar el contenido.</p>
  </section>

  <section class="tarjeta">
    <h2>CSS</h2>
    <p>Sirve para diseñar visualmente la página.</p>
  </section>

  <section class="tarjeta">
    <h2>JavaScript</h2>
    <p>Sirve para agregar interacción.</p>
  </section>
</main>

Este código HTML está bien estructurado, pero no define si las tarjetas se verán en fila, en columna o en grilla.

Eso se resuelve con CSS:

.contenedor {
  display: flex;
  gap: 20px;
}

O con Grid:

.contenedor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

4. Flexbox

4.1. ¿Qué es Flexbox?

Flexbox es un sistema de CSS que permite distribuir elementos dentro de un contenedor.

Sirve especialmente para organizar elementos en una sola dirección:

• en fila;

• en columna.

Flexbox es muy útil para:

• menús;

• botones;

• encabezados;

• tarjetas en fila;

• centrado de contenido;

• alineación de íconos y textos;

• distribución simple de elementos.

4.2. Contenedor padre e hijos

Flexbox funciona con dos partes:

Contenedor padre

Es el elemento al que le aplicamos:

display: flex;

Elementos hijos

Son los elementos que están dentro del contenedor y que se van a distribuir.

Ejemplo:

<div class="contenedor">
  <div class="item">Uno</div>
  <div class="item">Dos</div>
  <div class="item">Tres</div>
</div>

.contenedor {
  display: flex;
}

Con esa sola propiedad, los elementos hijos pasan a acomodarse en fila por defecto.

4.3. Ejemplo completo de Flexbox

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Primer ejemplo con Flexbox</title>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>

  <section class="contenedor">
    <div class="caja">Caja 1</div>
    <div class="caja">Caja 2</div>
    <div class="caja">Caja 3</div>
  </section>

</body>
</html>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f8fafc;
}

.contenedor {
  display: flex;
  padding: 20px;
  background-color: #eef2ff;
}

.caja {
  background-color: white;
  border: 1px solid #c7d2fe;
  padding: 20px;
  margin: 10px;
}

¿Qué sucede?

El contenedor tiene display: flex, por lo tanto las cajas se ubican en fila.

Sin Flexbox, las cajas aparecerían una debajo de la otra.

4.4. flex-direction

La propiedad flex-direction define la dirección principal de los elementos.

Valores comunes:

row
column
row-reverse
column-reverse

Ejemplo:

.contenedor {
  display: flex;
  flex-direction: row;
}

Esto ubica los elementos en fila.

.contenedor {
  display: flex;
  flex-direction: column;
}

Esto ubica los elementos en columna.

4.5. Eje principal y eje secundario

Flexbox trabaja con dos ejes:

Eje principal

Es el eje definido por flex-direction.

Si usamos:

flex-direction: row;

el eje principal es horizontal.

Si usamos:

flex-direction: column;

el eje principal es vertical.

Eje secundario

Es el eje contrario al principal.

Esto es importante para entender justify-content y align-items.

4.6. justify-content

justify-content distribuye los elementos sobre el eje principal.

Ejemplo:

.contenedor {
  display: flex;
  justify-content: center;
}

Valores comunes:

flex-start
center
flex-end
space-between
space-around
space-evenly

Ejemplo práctico

.menu {
  display: flex;
  justify-content: space-between;
}

Esto reparte los elementos dejando espacio entre ellos.

4.7. align-items

align-items alinea los elementos sobre el eje secundario.

Ejemplo:

.contenedor {
  display: flex;
  align-items: center;
}

Valores comunes:

flex-start
center
flex-end
stretch

Si el contenedor tiene altura, align-items: center permite centrar verticalmente los elementos.

4.8. Centrado perfecto con Flexbox

Uno de los usos más comunes de Flexbox es centrar un bloque.

HTML

<section class="hero">
  <div class="contenido">
    <h1>Aprendé Front-End</h1>
    <p>HTML, CSS y JavaScript desde cero.</p>
    <a href="#" class="boton">Comenzar</a>
  </div>
</section>

CSS

.hero {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dbeafe;
}

.contenido {
  text-align: center;
  background-color: white;
  padding: 32px;
  border-radius: 16px;
  max-width: 500px;
}

.boton {
  display: inline-block;
  padding: 12px 20px;
  background-color: #2563eb;
  color: white;
  text-decoration: none;
  border-radius: 8px;
}

Explicación

justify-content: center;

centra en el eje principal.

align-items: center;

centra en el eje secundario.

Con ambas propiedades, el contenido queda centrado horizontal y verticalmente.

4.9. gap

gap define el espacio entre elementos.

Ejemplo:

.contenedor {
  display: flex;
  gap: 20px;
}

Es preferible usar gap antes que agregar márgenes manuales a cada hijo.

Menos recomendable:

.card {
  margin-right: 20px;
}

Más recomendable:

.contenedor {
  display: flex;
  gap: 20px;
}

La separación pertenece al contenedor, no a cada elemento individual.

4.10. flex-wrap

Por defecto, Flexbox intenta ubicar todos los elementos en una sola línea.

Cuando no entran, pueden comprimirse demasiado o salirse del contenedor.

Para permitir que bajen a otra línea usamos:

flex-wrap: wrap;

Ejemplo:

.tarjetas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

Esto es muy útil para tarjetas.

4.11. Tarjetas con Flexbox

HTML

<section class="tarjetas">
  <article class="card">
    <h2>HTML</h2>
    <p>Sirve para estructurar el contenido.</p>
  </article>

  <article class="card">
    <h2>CSS</h2>
    <p>Sirve para diseñar visualmente la página.</p>
  </article>

  <article class="card">
    <h2>JavaScript</h2>
    <p>Sirve para agregar interacción.</p>
  </article>
</section>

CSS

.tarjetas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 40px;
  background-color: #f1f5f9;
}

.card {
  width: 260px;
  padding: 24px;
  background-color: white;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
}

.card h2 {
  margin-top: 0;
  color: #1e293b;
}

.card p {
  color: #475569;
}

Explicación

El contenedor .tarjetas usa Flexbox.

Cada .card tiene un ancho fijo de 260px.

Con flex-wrap: wrap, si las tarjetas no entran en la misma línea, bajan a otra.

5. CSS Grid

5.1. ¿Qué es CSS Grid?

CSS Grid es un sistema de maquetación en dos dimensiones.

Permite trabajar con:

• filas;

• columnas.

Es ideal para estructuras más complejas, como:

• galerías;

• paneles;

• layouts con sidebar;

• grillas de productos;

• secciones de tarjetas;

• estructuras generales de página.

5.2. Diferencia entre Flexbox y Grid

La diferencia principal es esta:

Flexbox

Trabaja mejor en una dimensión.

Ejemplo:

Elemento | Elemento | Elemento

Grid

Trabaja mejor en dos dimensiones.

Ejemplo:

Elemento | Elemento | Elemento
Elemento | Elemento | Elemento

5.3. Regla práctica

Usar Flexbox cuando:

• queremos alinear elementos en fila;

• queremos alinear elementos en columna;

• queremos centrar contenido;

• queremos distribuir botones;

• queremos armar un menú.

Usar Grid cuando:

• necesitamos filas y columnas;

• queremos una galería;

• queremos tarjetas distribuidas en grilla;

• queremos un layout completo;

• necesitamos una estructura más controlada.

5.4. Primer ejemplo con Grid

HTML

<section class="grilla">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</section>

CSS

.grilla {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 40px;
  background-color: #f8fafc;
}

.item {
  padding: 30px;
  background-color: white;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  text-align: center;
}

Resultado esperado

1 | 2 | 3
4 | 5 | 6

5.5. grid-template-columns

La propiedad grid-template-columns define las columnas de una grilla.

Ejemplo:

.grilla {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Esto crea tres columnas iguales.

La unidad fr significa fracción del espacio disponible.

Entonces:

grid-template-columns: 1fr 1fr 1fr;

significa:

• primera columna: una fracción;

• segunda columna: una fracción;

• tercera columna: una fracción.

Las tres columnas ocupan el mismo ancho.

5.6. Columnas fijas y flexibles

Grid permite combinar tamaños fijos y flexibles.

Ejemplo:

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 24px;
}

Esto crea:

• una primera columna fija de 250px;

• una segunda columna flexible que ocupa el resto.

Este patrón sirve para páginas con menú lateral.

5.7. Layout con sidebar

HTML

<div class="layout">
  <aside class="sidebar">
    <h2>Menú</h2>
    <ul>
      <li>Inicio</li>
      <li>Cursos</li>
      <li>Perfil</li>
    </ul>
  </aside>

  <main class="contenido">
    <h1>Panel principal</h1>
    <p>Este es el contenido principal de la página.</p>
  </main>
</div>

CSS

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 24px;
}

.sidebar {
  background-color: #e0f2fe;
  padding: 24px;
  border-radius: 16px;
}

.contenido {
  background-color: #ffffff;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

Explicación

El contenedor .layout tiene dos columnas.

La primera columna es el menú lateral.

La segunda columna es el contenido principal.

5.8. repeat()

La función repeat() permite repetir valores sin escribirlos varias veces.

En vez de esto:

grid-template-columns: 1fr 1fr 1fr;

podemos escribir esto:

grid-template-columns: repeat(3, 1fr);

Ambas reglas producen tres columnas iguales.

5.9. minmax()

minmax() permite definir un tamaño mínimo y un tamaño máximo.

Ejemplo:

grid-template-columns: repeat(3, minmax(200px, 1fr));

Esto significa:

• cada columna debe medir como mínimo 200px;

• cada columna puede crecer hasta ocupar una fracción disponible.

5.10. auto-fit

auto-fit permite que el navegador calcule cuántas columnas entran.

Ejemplo:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

Esto significa:

• cada columna mide como mínimo 220px;

• si entran tres columnas, se muestran tres;

• si entran dos, se muestran dos;

• si entra una sola, se muestra una.

Es una forma muy práctica de hacer grillas responsive.

5.11. Grilla responsive de tarjetas

HTML

<section class="cursos">
  <article class="curso">
    <h2>HTML</h2>
    <p>Aprendé a estructurar páginas web.</p>
    <a href="#">Ver curso</a>
  </article>

  <article class="curso">
    <h2>CSS</h2>
    <p>Aprendé a diseñar interfaces visuales.</p>
    <a href="#">Ver curso</a>
  </article>

  <article class="curso">
    <h2>JavaScript</h2>
    <p>Agregá interacción a tus páginas.</p>
    <a href="#">Ver curso</a>
  </article>
</section>

CSS

.cursos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  padding: 40px;
  background-color: #f8fafc;
}

.curso {
  background-color: white;
  padding: 24px;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
}

.curso h2 {
  margin-top: 0;
  color: #0f172a;
}

.curso p {
  color: #475569;
}

.curso a {
  display: inline-block;
  margin-top: 12px;
  color: white;
  background-color: #2563eb;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
}

Explicación

La grilla se adapta automáticamente al ancho disponible.

En pantalla grande puede verse así:

HTML | CSS | JavaScript

En pantalla chica puede verse así:

HTML
CSS
JavaScript

6. Diseño responsive

6.1. ¿Qué es responsive design?

Un diseño responsive es un diseño que se adapta a distintos tamaños de pantalla.

Una página web debería funcionar bien en:

• celulares;

• tablets;

• notebooks;

• monitores grandes.

No debería depender de un único tamaño de pantalla.

Un sitio no responsive puede generar problemas como:

• contenido cortado;

• scroll horizontal;

• textos demasiado chicos;

• botones difíciles de tocar;

• columnas demasiado apretadas;

• imágenes que se salen de pantalla.

6.2. El problema de los anchos fijos

Ejemplo problemático:

.card {
  width: 600px;
}

Esto puede verse bien en escritorio, pero mal en celular.

Un celular puede tener 360px de ancho. Una tarjeta de 600px no entra.

Mejor opción:

.card {
  width: 100%;
  max-width: 600px;
}

Esto permite que la tarjeta ocupe el ancho disponible, pero sin superar los 600px.

6.3. Medidas fijas vs medidas flexibles

Medida fija

width: 600px;

El elemento mide siempre 600px.

Medida flexible

width: 100%;
max-width: 600px;

El elemento puede achicarse si la pantalla es menor.

Para responsive, conviene usar medidas flexibles siempre que sea posible.

6.4. Viewport

Para que una página se vea correctamente en dispositivos móviles, es importante incluir esta línea en el head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esta línea indica que el ancho de la página debe coincidir con el ancho real del dispositivo.

Sin esta línea, el navegador móvil puede mostrar la página como si fuera una versión de escritorio achicada.

6.5. Media queries

Las media queries permiten aplicar CSS según ciertas condiciones.

La condición más común es el ancho de pantalla.

Ejemplo:

@media (max-width: 600px) {
  .contenedor {
    flex-direction: column;
  }
}

Esto significa:

Cuando la pantalla tenga hasta 600px de ancho, .contenedor cambia a columna.

6.6. Header responsive

HTML

<header class="header">
  <h1 class="logo">Mi Sitio</h1>

  <nav class="menu">
    <a href="#">Inicio</a>
    <a href="#">Cursos</a>
    <a href="#">Contacto</a>
  </nav>
</header>

CSS

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 40px;
  background-color: #0f172a;
}

.logo {
  color: white;
  margin: 0;
}

.menu {
  display: flex;
  gap: 20px;
}

.menu a {
  color: white;
  text-decoration: none;
}

@media (max-width: 600px) {
  .header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .menu {
    flex-direction: column;
    gap: 10px;
  }
}

Explicación

En escritorio:

Logo                  Menú

En celular:

Logo
Menú

La media query modifica la distribución para que el menú no quede apretado.

6.7. Mobile first

Mobile first significa diseñar primero para pantallas chicas.

Primero escribimos el CSS base para celular.

Después agregamos reglas para pantallas más grandes.

Ejemplo:

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

Ventaja

El diseño parte de la situación más limitada: la pantalla chica.

Después se mejora para pantallas grandes.

6.8. Desktop first

Desktop first significa diseñar primero para escritorio.

Después agregamos correcciones para pantallas más chicas.

Ejemplo:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

Observación

También es válido, pero puede generar más correcciones si el diseño inicial no se pensó para pantallas chicas.

7. Ejemplo integrador

7.1. HTML completo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">

  <!-- Permite que el sitio se adapte correctamente a celulares -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Landing de Cursos</title>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>

  <!-- Encabezado principal del sitio -->
  <header class="header">
    <h1>Front-End IFTS</h1>

    <!-- Menú de navegación -->
    <nav class="menu">
      <a href="#">Inicio</a>
      <a href="#">Cursos</a>
      <a href="#">Contacto</a>
    </nav>
  </header>

  <main>
    <!-- Sección principal -->
    <section class="hero">
      <h2>Aprendé desarrollo web desde cero</h2>
      <p>HTML, CSS y JavaScript aplicados a páginas reales.</p>
      <a href="#" class="boton">Empezar ahora</a>
    </section>

    <!-- Sección de tarjetas -->
    <section class="cards">
      <article class="card">
        <h3>HTML</h3>
        <p>Estructura y contenido semántico.</p>
      </article>

      <article class="card">
        <h3>CSS</h3>
        <p>Diseño visual y maquetación.</p>
      </article>

      <article class="card">
        <h3>JavaScript</h3>
        <p>Interacción con el usuario.</p>
      </article>
    </section>
  </main>

</body>
</html>

7.2. CSS completo

/* Hace que padding y border no agranden el tamaño total del elemento */
* {
  box-sizing: border-box;
}

/* Estilos generales de la página */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
}

/* Encabezado principal */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 40px;
  background-color: #0f172a;
  color: white;
}

.header h1 {
  margin: 0;
}

/* Menú de navegación */
.menu {
  display: flex;
  gap: 20px;
}

.menu a {
  color: white;
  text-decoration: none;
}

/* Sección principal */
.hero {
  max-width: 900px;
  margin: 40px auto;
  padding: 40px 24px;
  text-align: center;
}

.hero h2 {
  font-size: 40px;
  margin-bottom: 16px;
}

.hero p {
  font-size: 18px;
  color: #475569;
}

/* Botón principal */
.boton {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 20px;
  background-color: #2563eb;
  color: white;
  text-decoration: none;
  border-radius: 8px;
}

/* Grilla de tarjetas */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto 60px;
  padding: 0 24px;
}

/* Tarjeta individual */
.card {
  background-color: white;
  padding: 24px;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
}

/* Adaptación para pantallas chicas */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .menu {
    flex-direction: column;
    gap: 10px;
  }

  .hero h2 {
    font-size: 30px;
  }

  .cards {
    grid-template-columns: 1fr;
  }
}

7.3. Qué se aplica en este ejemplo

En este ejemplo se aplican varios conceptos de la clase:

Flexbox

Se usa en el header:

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

También se usa en el menú:

.menu {
  display: flex;
  gap: 20px;
}

Grid

Se usa en la sección de tarjetas:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Responsive

Se usa con media query:

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

8. Errores comunes

8.1. Usar anchos fijos para todo

Error:

.card {
  width: 700px;
}

Esto puede romper el diseño en pantallas chicas.

Mejor:

.card {
  width: 100%;
  max-width: 700px;
}

8.2. No usar box-sizing

Es recomendable incluir:

* {
  box-sizing: border-box;
}

Esto hace que el padding y el borde se calculen dentro del tamaño total del elemento.

8.3. Usar márgenes cuando conviene usar gap

Menos recomendable:

.card {
  margin-right: 20px;
}

Más recomendable:

.contenedor {
  display: flex;
  gap: 20px;
}

O:

.contenedor {
  display: grid;
  gap: 20px;
}

8.4. Usar Flexbox para todo

Flexbox es muy útil, pero no siempre es la mejor herramienta.

Si necesitamos filas y columnas controladas, Grid suele ser más claro.

Ejemplo donde conviene Grid:

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

8.5. No probar en pantalla chica

Un error muy común es mirar la página solo en una pantalla grande.

Siempre conviene probar:

• ancho grande;

• ancho mediano;

• ancho chico;

• simulación de celular en el navegador.

9. Ejercicio práctico

Consigna

Tomar el ejercicio de la clase anterior, donde se había creado una tarjeta de presentación visual, y transformarlo en una sección responsive con varias tarjetas.

Requisitos

El trabajo debe tener:

1. Un contenedor principal.

2. Al menos tres tarjetas.

3. Uso de Flexbox o Grid.

4. Separación entre tarjetas usando gap.

5. Media query para adaptar el diseño a pantallas chicas.

6. Buen uso de padding, bordes, colores y tipografías.

7. Código ordenado y entendible.

9.1. HTML sugerido

<main class="contenedor">
  <section class="tarjeta">
    <h2>Eduardo</h2>
    <p>Estudiante de desarrollo web.</p>
    <a href="#">Ver perfil</a>
  </section>

  <section class="tarjeta">
    <h2>HTML</h2>
    <p>Estoy aprendiendo estructura semántica.</p>
    <a href="#">Ver tema</a>
  </section>

  <section class="tarjeta">
    <h2>CSS</h2>
    <p>Estoy aprendiendo diseño visual y responsive.</p>
    <a href="#">Ver tema</a>
  </section>
</main>

9.2. CSS sugerido

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f1f5f9;
}

.contenedor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
}

.tarjeta {
  background-color: white;
  padding: 24px;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
}

.tarjeta h2 {
  margin-top: 0;
  color: #0f172a;
}

.tarjeta p {
  color: #475569;
}

.tarjeta a {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 16px;
  background-color: #2563eb;
  color: white;
  text-decoration: none;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .contenedor {
    grid-template-columns: 1fr;
  }
}

9.3. Resultado esperado

En pantalla grande:

Tarjeta 1 | Tarjeta 2 | Tarjeta 3

En pantalla chica:

Tarjeta 1
Tarjeta 2
Tarjeta 3

La página debe mantener buena lectura, separación y orden visual.

No debería aparecer scroll horizontal.

10. Criterios para revisar el ejercicio

Para revisar si el ejercicio está bien resuelto, se puede usar esta lista:

• ¿El HTML está correctamente estructurado?

• ¿Las tarjetas están dentro de un contenedor principal?

• ¿El CSS está separado y ordenado?

• ¿Se usa display: flex o display: grid correctamente?

• ¿Se usa gap para separar elementos?

• ¿La página se adapta a pantallas chicas?

• ¿Se usa una media query?

• ¿El texto sigue siendo legible?

• ¿No aparece scroll horizontal?

• ¿El diseño mantiene coherencia visual?

11. Resumen de propiedades vistas

Flexbox

display: flex;

Activa Flexbox en el contenedor.

flex-direction: row;

Ordena los elementos en fila.

flex-direction: column;

Ordena los elementos en columna.

justify-content: center;

Centra sobre el eje principal.

align-items: center;

Centra sobre el eje secundario.

gap: 20px;

Agrega espacio entre elementos.

flex-wrap: wrap;

Permite que los elementos bajen a otra línea.

Grid

display: grid;

Activa Grid en el contenedor.

grid-template-columns: 1fr 1fr 1fr;

Crea tres columnas iguales.

grid-template-columns: repeat(3, 1fr);

Otra forma de crear tres columnas iguales.

grid-template-columns: 250px 1fr;

Crea una columna fija y otra flexible.

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

Crea una grilla responsive.

gap: 24px;

Agrega espacio entre filas y columnas.

Responsive

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Permite que el diseño se adapte correctamente a dispositivos móviles.

@media (max-width: 768px) {
  .contenedor {
    grid-template-columns: 1fr;
  }
}

Aplica estilos específicos para pantallas chicas.

12. Idea central de la clase

Una página web no solo necesita contenido y colores.

También necesita una estructura visual clara.

Flexbox, Grid y responsive design permiten construir interfaces más ordenadas, más flexibles y más usables.

La clave no es aprender propiedades de memoria, sino entender qué problema resuelve cada herramienta.

• Si necesito alinear elementos en una dirección, uso Flexbox.

• Si necesito filas y columnas, uso Grid.

• Si necesito adaptar el diseño a distintas pantallas, uso responsive y media queries.