Al igual que las columnas del Partenón griego que soportan uno de los monumentos más notables del mundo, las columnas HTML soportan algunos de los sitios web más exclusivos. La única diferencia entre ellos es que uno es digital y el otro no.
Esta publicación le enseñará qué son las columnas HTML y cómo funcionan. También aprenderá ejemplos de código para diferentes formas de crear diseños de columnas para sitios HTML. Además, verá varios videos que discuten los conceptos discutidos en esta publicación que ayudarán a reforzar lo que ha aprendido.
Sin más preámbulos, comencemos esta fiesta.
Cómo crear columnas en HTML
Hay más de una forma de crear columnas HTML; a pesar de cómo suene, necesitas una combinación de HTML y CSS. Durante mucho tiempo, la única forma de crear columnas era declararlas manualmente configurando estilos CSS para la página con tamaños estáticos para los elementos. Este enfoque funcionó, pero solo simuló la apariencia visual de las columnas.
Desde entonces, CSS ha crecido y la construcción de diseños de columnas se ha vuelto mucho más accesible y tiene mucho más soporte de lo que solía ser. Además, hay muchas formas de crear diseños de columnas para páginas web. En CSS de hoy, esto es CSS3 en el momento de escribir este artículo, puede crear diseños de columnas con tablas y cuadrículas, y CSS incluso proporciona una propiedad de columna.
En la siguiente sección, cubriremos cómo crear un diseño simple de dos columnas usando anchos y márgenes con CSS básico.
HTML Dos columnas
Crear un diseño simple de dos columnas en HTML es sencillo y, sinceramente, solo requiere configurar el ancho y el margen para un solo selector de CSS. Veamos el código necesario para configurar el HTML para este ejemplo básico de diseño de columnas.
<body>
<div class="column" style="background-color:red;">
<h2>Column 1</h2>
<p>Data..</p>
</div>
<div class="column" style="background-color:blue;">
<h2>Column 2</h2>
<p>Data..</p>
</div>
</body>
Este código es simple y solo crea un diseño basado en columnas de dos elementos, pero no funciona sin el CSS necesario para configurar sus estilos. Veamos el código CSS básico necesario para diseñar HTML en un diseño de dos columnas.
.column {
float: left;
width: 50%;
}
Solo tres líneas de CSS arriba, la página se convierte en un diseño de dos columnas que puede usar como mejor le parezca. Además, este diseño cambiará según sea necesario para mantener su tamaño y estructura en línea con la pantalla del usuario. Ahora que comprende lo simple que es, veamos otras formas de hacerlo que admitan mejor la escalabilidad.
Código HTML para columnas
A lo largo de los años, CSS ha crecido y se ha desarrollado mucho, y también ha mejorado las herramientas que ofrece para estilizar tus páginas web de una forma más sencilla y limpia. Estos cambios proporcionan algo más que flexibilidad. También ofrecen una mayor simplicidad y admiten la práctica aceptada del código DRY. Algunas formas de crear columnas no son bienvenidas en el estado actual de CSS. En un momento, los desarrolladores a menudo usaban tablas CSS para crear columnas; desde entonces ha caído en desuso.
En su lugar, ahora hay formas de crear columnas explícitamente. Veámoslo más a fondo.
En CSS3, puede apuntar a un elemento y establecer su propiedad de columna directamente. Este proceso funciona muy bien si desea tomar el contenido de su texto y dividirlo en columnas para facilitar la lectura.
.column{
columns: 45vw 3;
}
Este código no funciona bien cuando desea organizar varios elementos HTML en columnas; necesitará un enfoque diferente. Hay una manera limpia y eficiente de manejar el proceso de creación de columnas HTML en CSS3.
Veamos el código CSS necesario para crear un conjunto simple de dos columnas de igual tamaño usando el HTML anterior.
body {
width:100%;
display: inline-flex;
flex-wrap: wrap;
}
.column {
width:50%;
}
Este código crea un diseño de dos columnas simple y flexible en el elemento del cuerpo; sin embargo, no tiene en cuenta varias líneas. Si tiene varias filas de columnas, necesitará HTML adicional para crear un contenedor principal para las columnas. Agregar un nuevo padre para que actúe como una fila para cada conjunto de columnas significa que puede tener varias filas y diferentes tamaños de columna en cada fila.
Veamos el código HTML necesario para crear este efecto.
<body>
<section class="row">
<div class="column-2" style="background-color:red;">
<h2>Column 1</h2>
<p>Data..</p>
</div>
<div class="column-2" style="background-color:blue;">
<h2>Column 2</h2>
<p>Data..</p>
</div>
</section>
<section class="row">
<div class="column-3" style="background-color:green;">
<h2>Column 1</h2>
<p>Data..</p>
</div>
<div class="column-3" style="background-color:brown;">
<h2>Column 2</h2>
<p>Data..</p>
</div>
<div class="column-3" style="background-color:purple;">
<h2>Column 3</h2>
<p>Data..</p>
</div>
</section>
</body>
Este código HTML consta de dos secciones adicionales que sirven como contenedores de filas. La primera fila es un diseño de dos columnas, la segunda es un diseño de tres columnas. Debido a estos cambios, también necesitará CSS adicional, creando un nuevo nombre de clase para cada conjunto de tamaños de columna.
Cambiar el nombre de la clase de columna a columna-2 y columna-3 facilita la configuración de los tamaños de cada columna. Veamos el CSS necesario para crear este diseño.
.column-2 {
width:50%;
}
.column-3 {
width:33.333%;
}
.row {
width:100%;
display: inline-flex;
flex-wrap: wrap;
}
Este código crea un buen diseño de dos líneas y varias columnas; Hay otras formas de crear diseños de columnas para sitios web, cada una con ventajas y desventajas. Un ejemplo es CSS Grid Layout, que ofrece una gran potencia, control y flexibilidad al crear diseños de sitios web. A continuación se muestra un video que explica cómo usar una cuadrícula CSS para crear diseños únicos.
Ciclo adelante con diseños de columnas HTML
Lo mejor que puede hacer para continuar con las columnas en sus páginas web HTML es estudiar las diferentes formas de crear columnas. Hay muchas formas, e incluso algunos preprocesadores de CSS tienen diseños de columnas integrados en su código.
Además, puede hacer más con las columnas, por ejemplo, combinarlas con consultas de medios para crear páginas receptivas. Puede crear páginas donde el tamaño y la cantidad de columnas pueden cambiar según el tamaño de la pantalla del dispositivo que muestra la página. Hay mucho que aprender y la mejor manera de hacerlo es practicar diferentes métodos y encontrar el método que prefiera.
