Articles
Introducción a CSS
Propiedades de CSS relacionadas con el diseño de columnas

Propiedades de CSS relacionadas con el diseño de columnas

Este artículo explica las propiedades de CSS relacionadas con el diseño de columnas.

Puedes aprender a describir diseños de columnas.

YouTube Video

HTML para vista previa

css-columns.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-columns.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Columns</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>columns</h3>
23            <section style="width: 100%; height: 350px;">
24                <h4>Columns Example</h4>
25                <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26                <section class="sample-view">
27                    <section class="columns-container">
28                        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31                        <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32                        <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33                        <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34                    </section>
35                </section>
36            </section>
37        </article>
38        <article>
39            <h3>order</h3>
40            <section style="height: 300px;">
41                <header><h4>column-width: 250px</h4></header>
42                <section class="sample-view">
43                    <div class="container">
44                        <div class="item item-1">Item 1</div>
45                        <div class="item item-2">Item 2</div>
46                        <div class="item item-3">Item 3</div>
47                    </div>
48                </section>
49            </section>
50        </article>
51    </main>
52</body>
53</html>

Diseño de Columnas

columnas 

1.columns-container {
2    columns: 100px 3;
3    column-gap: 20px;
4    column-rule: 2px solid #333;
5}
6
7h5 {
8  column-span: all;
9}

La propiedad columns de CSS ofrece una forma conveniente de mostrar contenido dividido en múltiples columnas. Con una sola declaración, puedes establecer fácilmente el ancho y el número de columnas, haciéndolo adecuado para diseños responsivos. Es particularmente efectivo cuando se requiere un diseño donde el texto se muestre largo verticalmente y se organice en múltiples columnas, como en periódicos o revistas.

  • En este ejemplo, el contenido se divide en 3 columnas con un espacio de 20px y una regla de 2px entre las columnas. Además, el elemento h5 abarca múltiples columnas.

columns es una abreviatura para las propiedades column-width y column-count.

Sintaxis de la Propiedad columns 

1columns: <column-width> <column-count>;

columns sigue este formato.

  • <column-width>: Especifica el ancho de cada columna. Puedes usar auto o cualquier unidad de longitud (por ejemplo, px, em, %, etc.) como valor.
  • <column-count>: Especifica el número de columnas. Se expresa como un valor numérico.
Propiedad column-width 
1.container {
2  column-width: 250px;
3}

column-width es una propiedad que especifica el ancho mínimo de cada columna. Cuando se utiliza con column-count, se hace posible la colocación y ajuste automáticos de las columnas. El navegador tiene en cuenta el ancho del contenedor y calcula automáticamente el número requerido de columnas.

  • En este ejemplo, el ancho por columna es de 250px, y el número óptimo de columnas se calcula en función del ancho del contenedor.
Propiedad column-count 
1.container {
2  column-count: 3;
3}

column-count es una propiedad que establece explícitamente en cuántas columnas se divide el elemento especificado. A diferencia de column-width, esto fija el número de columnas.

  • En este ejemplo, el contenido dentro del contenedor se divide en tres columnas.
Propiedad column-gap 
1.container {
2  column-gap: 20px;
3}

column-gap es una propiedad que especifica el espacio (separación) entre cada columna. También existe una propiedad común en CSS Grid llamada gap, pero column-gap es útil cuando deseas personalizar solo los márgenes entre columnas.

  • En este ejemplo, hay un margen de 20px entre cada columna. El valor predeterminado es de 16px.
Propiedad column-rule 
1.container {
2  column-rule: 2px solid #333;
3}

column-rule es una propiedad para dibujar líneas entre columnas. Tiene una sintaxis similar a la propiedad border y te permite especificar el ancho, estilo y color de la línea.

  • En este ejemplo, se muestra una línea negra sólida con un ancho de 2px entre las columnas. column-rule se puede desglosar en las siguientes tres propiedades.
    • column-rule-width: Especifica el ancho de la línea.
    • column-rule-style: Especifica el estilo de la línea. Por ejemplo, hay solid, dashed, dotted, etc.
    • column-rule-color: Especifica el color de la línea.
Propiedad column-span 
1h5 {
2  column-span: all;
3}

column-span es una propiedad que permite que un elemento específico abarque varias columnas. Se utiliza principalmente para elementos como encabezados o títulos. Hay dos valores posibles:. - none: El elemento no abarca columnas y se ajusta dentro de una columna. Este es el valor predeterminado. - all: El elemento se muestra abarcando todas las columnas.

  • En este ejemplo, el elemento h5 se muestra abarcando varias columnas.
Propiedad column-fill 
1.container {
2  column-fill: balance;
3}

column-fill es una propiedad que controla cómo se distribuye el contenido entre las columnas. Normalmente, las columnas se llenan de la manera más equitativa posible, pero esta propiedad te permite especificar una distribución diferente. Los siguientes valores están disponibles:. - balance: El contenido se distribuye para llenar las columnas de manera equitativa. Este es el valor predeterminado. - auto: Las columnas se llenarán automáticamente. La última columna puede volverse más larga.

  • Esta configuración se ajusta para que el contenido se distribuya uniformemente.
Uso con consultas de medios 
1.container {
2  columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6  .container {
7    columns: 1;
8  }
9}

La propiedad columns se puede combinar con consultas de medios para admitir un diseño responsivo. Puedes cambiar de forma flexible el número de columnas y los anchos de las columnas según los diferentes tamaños de pantalla.

  • En este ejemplo, cuando el ancho de la pantalla sea de 600px o menos, habrá 1 columna. Para pantallas más anchas, se dividirá en 3 columnas con un ancho de 200px cada una.

Resumen

La propiedad CSS columns es una herramienta poderosa para implementar fácilmente diseños utilizando múltiples columnas. Es particularmente útil para diseños responsivos y para diseños de texto que priorizan la legibilidad. Combinando propiedades relacionadas, puedes personalizar de manera flexible el número y el ancho de las columnas, los espacios, las decoraciones, etc.

Esto permite implementar fácilmente diseños más sofisticados, así que aprovéchalo.

orden 

 1.container {
 2    all:initial;
 3    display: flex;
 4}
 5.item {
 6    padding: 10px;
 7    background-color: lightblue;
 8    margin: 5px;
 9}
10.item-1 {
11    order: 3;
12}
13.item-2 {
14    order: 1;
15}
16.item-3 {
17    order: 2;
18}

La propiedad CSS order se utiliza para controlar el orden de visualización de los elementos al usar diseños Flexbox o Grid. Normalmente, los elementos se renderizan según el marcado HTML, pero puedes cambiar su orden visual utilizando la propiedad order. Esta propiedad ayuda a diseñar interfaces de usuario flexibles y a construir diseños responsivos.

  • En este ejemplo, los elementos están marcados en HTML como Item 1, Item 2, Item 3, pero el orden de visualización cambia a Item 2, Item 3, Item 1 debido a la propiedad CSS order.

Conceptos básicos de la propiedad order

La propiedad order se aplica a los elementos dentro de contenedores Flexbox o Grid. Defines el orden de colocación asignando valores enteros a cada elemento. Por defecto, el order de todos los elementos está configurado en 0. Cambiando este valor, puedes especificar el orden en que los elementos se muestran.

Sintaxis Básica 
1.item {
2  order: <integer>;
3}
  • Puedes especificar cualquier número entero para el valor de order. Se pueden usar valores positivos, negativos o cero. Cuanto menor sea el valor, antes se mostrará el elemento, y cuanto mayor sea el valor, más tarde se mostrará.

Uso de valores positivos y negativos

También puedes asignar valores negativos a la propiedad order. Los elementos con valores negativos se muestran antes del orden por defecto.

1.item-1 {
2    order: -1;
3}
4.item-2 {
5    order: 2;
6}
7.item-3 {
8    order: 1;
9}

En este ejemplo, Item 1 tiene asignado order: -1, por lo que aparece primero. En contraste, Item 3 tiene el valor order: 1, y Item 2 tiene el valor order: 2, por lo que aparecen en ese orden.

order en diseño responsivo

En el diseño responsivo, es posible cambiar el orden de los elementos según el tamaño de la pantalla. Por ejemplo, en la vista móvil, puedes cambiar el orden de los elementos para mostrar primero la información importante.

 1.item-1 {
 2    order: 1;
 3}
 4.item-2 {
 5    order: 2;
 6}
 7.item-3 {
 8    order: 3;
 9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13    .item-1 {
14        order: 3;
15    }
16    .item-2 {
17        order: 1;
18    }
19    .item-3 {
20        order: 2;
21    }
22}

En este ejemplo, en la vista normal, los elementos se muestran en el orden de Item 1, Item 2, Item 3, pero cuando el ancho de la pantalla es inferior a 600px, Item 2 aparece primero, luego Item 3, y finalmente Item 1.

Consideraciones para order

Usar la propiedad order puede dar lugar a un orden visual que difiere del orden en el árbol DOM. Esto puede afectar a herramientas de accesibilidad, como los lectores de pantalla. Cuando se cambia el orden, la navegación por teclado y otras tecnologías de asistencia pueden no comportarse como se espera. Por lo tanto, es necesario considerar cuidadosamente el impacto en la experiencia del usuario al usar order.

Conclusión

La propiedad CSS order es una herramienta poderosa que te permite controlar fácilmente el orden de visualización de los elementos en diseños Flexbox o Grid. Usando valores positivos o negativos, puedes cambiar de manera flexible el orden de los elementos, lo cual es particularmente útil en el diseño responsivo. Sin embargo, se debe prestar atención a la accesibilidad y a la divergencia entre el orden visual y la estructura HTML. Si se consideran adecuadamente estos aspectos, la propiedad order puede ser útil para crear diseños más dinámicos y flexibles.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades de CSS relacionadas con el diseño de cuadrícula