🎯 Objetivos de aprendizaje

Comprender qué es el modelo de caja (Box Model) en CSS y cómo afecta al tamaño y espacio de los elementos.
Conocer las propiedades display y los valores más usados (block, inline, none).
Aprender los conceptos básicos de Flexbox para diseñar layouts flexibles y alineados.
Entender cómo funciona CSS Grid para crear diseños de cuadrícula bidimensionales.

📚 Contenidos teóricos con ejemplos claros y explicativos

El Box Model (Modelo de caja)

En CSS, cada elemento HTML es una "caja" rectangular compuesta por cuatro partes, de adentro hacia afuera:

Content (Contenido): El área donde va el texto o imagen.
Padding (Relleno): Espacio entre el contenido y el borde.
Border (Borde): Línea que rodea la caja.
Margin (Margen): Espacio externo que separa la caja de otros elementos.

El tamaño total que ocupa un elemento es la suma del contenido + padding + border + margin. Por eso, ajustar correctamente cada parte es clave para un diseño ordenado.

Propiedad display

Controla cómo se muestra un elemento:

block: El elemento ocupa toda la línea horizontal y comienza en una nueva línea (ejemplo: <div>, <p>).
inline: El elemento ocupa sólo el espacio necesario y se muestra en línea con otros elementos (ejemplo: <span>, <a>).
none: Oculta el elemento (no se muestra ni ocupa espacio).

Flexbox

Flexbox es un modelo de diseño unidimensional para distribuir espacio entre elementos en una fila o columna, ideal para layouts flexibles y responsivos.

Conceptos claves:

El contenedor tiene display: flex;.
Los elementos hijos (flex items) se distribuyen en fila o columna.
Propiedades importantes:
- justify-content: controla la alineación horizontal (start, center, space-between, etc.).
- align-items: controla la alineación vertical dentro del contenedor.
- flex-direction: define dirección fila o columna.

Grid

Grid es un modelo bidimensional que permite organizar elementos en filas y columnas. Muy útil para layouts complejos.

Conceptos claves:

El contenedor tiene display: grid;.
Se definen las columnas con grid-template-columns.
Se definen filas con grid-template-rows (opcional).
gap controla el espacio entre filas y columnas.

💻 Código paso a paso (comentado)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Box Model, Flexbox y Grid</title>
  <style>
    /* Caja con Box Model */
    .caja {
      width: 150px;             /* ancho del contenido */
      padding: 20px;            /* espacio interno */
      border: 2px solid #333;   /* borde */
      margin: 15px;             /* espacio externo */
      background-color: #f0f0f0;
      text-align: center;
    }

    /* Contenedor Flexbox */
    .contenedor-flex {
      display: flex;                       /* activa flexbox */
      justify-content: space-around;      /* espacio distribuido entre items */
      background-color: #ddd;
      padding: 10px;
    }
    .item-flex {
      background-color: #8bc34a;
      color: white;
      padding: 15px;
      border-radius: 5px;
      flex: 1; /* crece igual en espacio */
      margin: 5px;
      text-align: center;
    }

    /* Contenedor Grid */
    .contenedor-grid {
      display: grid;                              /* activa grid */
      grid-template-columns: repeat(3, 1fr);     /* 3 columnas iguales */
      gap: 10px;                                 /* espacio entre celdas */
      background-color: #ccc;
      padding: 10px;
    }
    .item-grid {
      background-color: #03a9f4;
      color: white;
      padding: 20px;
      text-align: center;
      border-radius: 5px;
    }
  </style>
</head>
<body>

  <h2>Box Model</h2>
  <div class="caja">Contenido de la caja</div>

  <h2>Flexbox</h2>
  <div class="contenedor-flex">
    <div class="item-flex">Ítem 1</div>
    <div class="item-flex">Ítem 2</div>
    <div class="item-flex">Ítem 3</div>
  </div>

  <h2>Grid</h2>
  <div class="contenedor-grid">
    <div class="item-grid">Celda 1</div>
    <div class="item-grid">Celda 2</div>
    <div class="item-grid">Celda 3</div>
    <div class="item-grid">Celda 4</div>
    <div class="item-grid">Celda 5</div>
    <div class="item-grid">Celda 6</div>
  </div>

</body>
</html>

📝 Resumen de los conceptos aprendidos

El Box Model determina el tamaño y espacio total que ocupa un elemento, considerando contenido, relleno, borde y margen.
La propiedad display define cómo se comportan los elementos en la página.
Flexbox es ideal para organizar elementos en una fila o columna, con control flexible del espacio y alineación.
Grid permite crear diseños en filas y columnas, perfecto para layouts más complejos.

🛠️ Ejercicio práctico final

Crea un archivo layout.html con lo siguiente:

Una caja usando Box Model con contenido, padding, borde y margen visibles.
Un contenedor Flexbox con 4 cajas de diferentes colores, que se distribuyan horizontalmente con espacios entre ellas.
Un contenedor Grid con 6 celdas organizadas en 3 columnas.
Ajusta tamaños, colores y espacios para que el diseño sea visualmente claro.

💡 Tips adicionales

Usa herramientas de desarrollo del navegador (como Inspector en Chrome o Firefox) para visualizar el Box Model y entender el espacio que ocupan tus elementos.
Para Flexbox, prueba diferentes valores de justify-content y align-items para ver cómo cambian la distribución.
En Grid, experimenta con diferentes valores de grid-template-columns como 1fr 2fr 1fr para columnas desiguales.
Combina Flexbox y Grid en una misma página para aprovechar lo mejor de cada uno.
Recuerda que margin puede colapsar (especialmente verticalmente), es bueno conocer ese comportamiento para evitar sorpresas.
Siempre prueba tu diseño en diferentes tamaños de pantalla para asegurar que sea flexible y responsive.

9 - CSS: Box Model, display, flexbox y grid 📦✨

El Box Model (Modelo de caja)

Propiedad display

Flexbox

Grid

Subscribe to my newsletter

Carlos BC

Carlos BC