Los sitios web, a menudo, muestran contenido en varias columnas (como una revista o un periódico).
Elementos de diseño
HTML tiene varios elementos semánticos que definen las diferentes partes de una página web:
<header>- Define un encabezado para un documento o una sección.<nav>- Define un conjunto de enlaces de navegación.<section>- Define una sección en un documento.<article>- Define un contenido independiente.<aside>- Define un contenido muy aparte del contenido principal.<footer>- Define un pie de página para un documento o sección.<details>- Define detalles adicionales que el usuario puede abrir y cerrar.<summary>- Define un conjunto de enlaces de navegación.
Técnicas de diseño
Hay cuatro diferentes técnicas que puedes usar para crear diseños que contengan varias columnas. Cada técnica tiene sus pros y sus contras:
Frameworks CSS
Propiedad
floatFlexbox CSS
CSS Grid
Frameworks CSS
Si deseas crear rápidamente un diseño, puedes usar un framework CSS, como W3.CSS o Bootstrap.
Float CSS
Antes era muy común crear diseños web completos usando la propiedad CSS float. Float es fácil de aprender, solo necesitas recordar cómo funcionan las propiedades float y clear. Desventajas: los elementos flotantes están vinculados al flujo del documento, lo que puede dañar la flexibilidad.
Ejemplo:
Flexbox CSS
El uso de flexbox garantiza que los elementos se comporten de manera predecible cuando el diseño de la página deba adaptarse a diferentes tamaños de pantalla y diferentes dispositivos.
Ejemplo:
Grid CSS
El módulo de diseño Grid CSS ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar float y posicionamiento.
Resumen
Podemos usar diferentes técnicas y elementos para diseñar páginas web responsivas y de forma rápida. También tenemos frameworks CSS como W3.CSS, Bootstrap, entre otros.
Traducido con 💚 desde W3Schools.com