¿Cómo dividir texto o divs en dos o más columnas en HTML y CSS?

Para obtener columnas en CSS responsive agregamos la propiedad columns que divide proporcionalmente el contenido en el número de columnas indicado. Columns: 2 200px por ejemplo.

Suscríbete a nuestro canal en Youtube

En el fascinante mundo del diseño web, la experiencia del usuario (UX) es la joya de la corona. Cada línea de código, cada elección de diseño, se convierte en un ladrillo que construye la experiencia global de quienes visitan nuestra página. En esta ocasión, vamos a sumergirnos en el poder de las propiedades de "Columns" en CSS para mejorar significativamente la presentación de contenido y, por ende, la UX de nuestros usuarios.

Columnas en CSS Responsivas
Dividir div en 2 columnas html
Dividir div en 3 columnas html

¿Qué son las Columns en CSS?

Las Columns son una propiedad de CSS que permite dividir el contenido en columnas, brindando una presentación elegante y organizada. Esto no solo optimiza el espacio en pantalla, sino que también facilita la lectura y navegación, mejorando la interacción general del usuario con el sitio.

Ejemplo Práctico: Creando una Página de Blog Atractiva

Para ilustrar el poder de las Columns, consideremos la creación de una página de blog. Imagina un diseño donde cada entrada se presenta en columnas, ofreciendo a los lectores una experiencia visualmente agradable y fácil de consumir.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Texto responsive en CSS</title>
    <style>
        body{ margin: 0; font-family: Arial, Helvetica, sans-serif;}
        .container{            
            display: grid;
            justify-content: center;
            height: 100vh;
            place-items: center;
        }        
        .card{
            max-width: 1000px;
            border-radius: 25px;
            padding: 40px;
            background: peachpuff;
            columns:3 200px;
            column-rule: 2px peru dotted;                
            column-gap: 40px;
        }
        .card h1{ 
            text-align: center;
            color: peru;
            column-span: all;
        }
        .card h2 {                        
            color: brown;
            column-span: all;
        }
        .card p{ 
            text-align: justify;
            margin: 0;
            line-height: 25px;
        }
        .card img{
            margin: 0 auto;
            display: block;
        }
        
        
    </style>
</head>
<body>
    <div class="container">
        
        <div class="card">
            <h1>Texto en columnas con CSS</h1>
            <h2>Lorem ipsum dolor, sit amet consectetur</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, modi. Non quibusdam corrupti porro veniam? Saepe, reiciendis, molestiae pariatur, veniam dolor praesentium soluta eaque magnam minus recusandae quas autem? Ab!</p>
            <p>Louibusdam corrupti porro veniam? Saepe, reiciendis, molestiae pariatur, veniam dolor praesentium soluta eaque magnam minus autem? Ab!</p>
            <p>Lorem pisicing elit. Voluptas, modi. Non quibusdam corrupti porro veniam? Saepe, reiciendi soluta eaque magnam minus recusandae quas autem? Ab!</p>
            <h3>Listas desc aks</h3>
            <ul>
                <li>Elemento </li>
                <li>Elemento </li>
                <li>Elemento </li>
                <li>Elemento </li>
            </ul>
            <img src="card/img/adriana.jpg" alt="">
            <h2>Lorem ipsum dolor sit amet consectetur adipisicing </h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, modi. Non quibusdam corrupti porro veniam? Saepe, reiciendis, molestiae pariatur, veniam dolor praesentium soluta eaque magnam minus recusandae quas autem? Ab! Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio temporibus at tempora sed rem? Reiciendis, illo accusamus sit ducimus enim libero voluptatibus dolor ipsa, suscipit vero, dolore sapiente obcaecati culpa Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet vitae illo optio excepturi praesentium a placeat doloremque! Pariatur, magni laborum voluptatem magnam, natus repellendus consectetur vitae inventore itaque nisi fugiat.</p>            
        </div>
    </div>
</body>
</html>

Ventajas de Utilizar Columns:

Mejor Aprovechamiento del Espacio: Las Columns permiten distribuir el contenido de manera eficiente, evitando que los usuarios se sientan abrumados por grandes bloques de información.
Facilita la Lectura en Dispositivos Pequeños: En un mundo donde la movilidad es clave, las Columns se adaptan de manera natural a dispositivos móviles, mejorando la legibilidad y la navegación en pantallas más pequeñas.
Diseño Elegante y Moderno: Al utilizar Columns, puedes lograr un diseño más estilizado y contemporáneo, alejándote de la presentación monótona de una única columna.

Este simple ejemplo utiliza las Columns para organizar las entradas del blog en dos columnas, con un espacio de separación agradable. ¡Pero las posibilidades son infinitas!

Conclusión:

En resumen, las Columns en CSS son una herramienta poderosa para mejorar la UX al proporcionar una presentación visualmente atractiva y organizada del contenido. Al implementar esta propiedad con creatividad, podemos transformar la experiencia de nuestros usuarios, haciendo que la navegación por nuestro sitio web sea no solo funcional, sino también estéticamente placentera. ¡Inténtalo en tu próximo proyecto y observa cómo eleva el diseño de tu página web a un nivel superior!

Leido 1230 veces