DEV Community

Tu codigo cotidiano
Tu codigo cotidiano

Posted on

Maquetación Web: La Guía Definitiva de Box Model, Flexbox y CSS Grid

#css #webdev #tutorial #beginners

¡Hola, comunidad! 👋

Hoy quiero compartir con ustedes una guía sobre los conceptos fundamentales de la maquetación web moderna en CSS. Dominar estas herramientas no solo es una necesidad técnica, sino también una tendencia clave en el mercado laboral actual.

Partiremos del Modelo de Caja (Box Model) para sentar las bases, y luego exploraremos las dos herramientas de layout más poderosas que existen hoy: Flexbox y CSS Grid.

1. El modelo de caja (Box Model)

Después de entender la sintaxis básica de CSS, el siguiente concepto fundamental es el Modelo de Caja. En HTML, cada elemento es tratado como una caja rectangular. Comprender cómo funciona esta caja es crucial para posicionar y dimensionar los elementos.

1.1 Componentes del modelo de caja

El modelo de caja está compuesto por cuatro partes, ordenadas desde el interior hacia el exterior:

  • Content (Contenido): El área donde se muestra tu texto, imágenes, etc. Sus dimensiones son el width y height.
  • Padding (Relleno): El espacio transparente que rodea el contenido, pero DENTRO del borde.
  • Border (Borde): La línea que rodea al padding y al contenido.
  • Margin (Margen): El espacio transparente FUERA del borde. Su función es separar la caja de otros elementos.

Reflexión importante: Un error común de los principiantes es confundir margin y padding. Recuerda: el padding está adentro del borde, el margin está afuera. ¡Dominar esto es indispensable!

2. Layouts Modernos: Flexbox y CSS Grid

Una vez que entendemos cada caja individual, el siguiente paso es organizarlas. Aquí es donde entran las herramientas más importantes y demandadas: Flexbox y CSS Grid.

2.1 Flexbox: Maquetación Unidimensional

Flexbox es ideal para organizar elementos en una sola dimensión (fila o columna). Es la herramienta perfecta para:

  • Alinear los elementos de un menú de navegación.
  • Distribuir tarjetas de contenido de manera uniforme.
  • Centrar elementos vertical y horizontalmente con una facilidad asombrosa.

Ejemplo de HTML:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Ejemplo de CSS:


.flex-container {
  display: flex; 
  justify-content: space-around; /* Distribuye los elementos */
  align-items: center; /* Centra verticalmente */
  background-color: #f0f0f0;
  height: 100px;
}
Enter fullscreen mode Exit fullscreen mode

2.2 CSS Grid: Maquetación Bidimensional

CSS Grid es un sistema de maquetación en dos dimensiones (filas y columnas). Permite crear diseños complejos para toda la página de una manera que antes era muy difícil. Es el estándar para la maquetación general de sitios web modernos.

Ejemplo de HTML:


<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>
  <div class="item4">Footer</div>
</div>
Enter fullscreen mode Exit fullscreen mode

🔥 Continúa aprendiendo

¡Gracias por leer hasta aquí! Esto es solo el 60% del contenido original.

En la guía completa, que puedes encontrar en mi blog TuCodigoCotidiano, profundizo en:

¿Por qué Flexbox y Grid son una tendencia de mercado?

Beneficios clave para tu carrera y tus proyectos.

El impacto directo de un buen layout en la Experiencia de Usuario (UX).

Y más ejemplos prácticos.
Enter fullscreen mode Exit fullscreen mode

👉 https://tucodigocotidiano.yarumaltech.com/leer_guias/guia/26/

¡Únete a la membresía para acceder a esta y muchas otras guías, tutoriales y recursos exclusivos!

¡Espero que les sea de gran utilidad! ¡Feliz codificación!

Top comments (0)