CSS columns 🎨
Tags: css, webdev, spanish, design
Published: 2022-10-19 00:35:06

#**Índice**   
1. [Introducción](#id1)
2. [Sintaxis](#id2)
3. [`column-rule` y `column-gap`](#id3)
4. [`column-span`](#id4)
5. [Conclusiones](#id5)
6. [Referencias](#id6)


---

## **1. Introducción**<a name="id1"><a/>
¿Cómo podemos crear un sistema simple de columnas responsivas sin usar los típicos frameworks CSS son sus propio sistema d rejillas, ni Flex box, ni CSS Grid?

CSS de manera nativa cuenta con la propiedad `columns` para poder hacer esto y es muy fácil de aprender y de usar. 

## **2. Sintaxis**<a name="id2"><a/>
`columns` es en realidad un _shorthand_ de las propiedades `column-count` y `column-width`:

```css
.container {
  column-count:3;
  column-width: 250px;
  /* columns: 3 250px;*/
}
```

Donde:
* `column-count` establece el numero de columnas mínimas que necesito. 
* `column-width` estable el ancho máximo de que cada columna debe tener. 
* `columns` es el _shorthand_ que simplifica la sintaxis. 

Con sintaxis ya podemos organizar nuestro código en columnas de manera 100% responsive y sin media querys de por medio:

{% codepen https://codepen.io/dux-soft/pen/gOzbgjo %}

En el ejemplo vemos como en pantallas grandes establecemos 3 columnas como mínimo pero en pantallas de dispositivos mas pequeños la cantidad de columnas va disminuyendo en función del ancho máximo que le dimos, esto pasa nuevamente sin ningún tipo de media query. 

## **3. `column-rule` y `column-gap`** <a name="id3"><a/>
Podemos dar un estilo de borde a nuestras columnas usando la propiedad `column-rule` y un espaciado (muy similar a flex box) usando la propiedad `column-gap` de la siguiente manera:

{% codepen https://codepen.io/dux-soft/pen/yLjygwd %}

## **4. `column-span`** <a name="id4"><a/>
Con `column-span` podemos lograr diseños más bonitos entre las columnas del documento, considera el siguiente ejemplo:

{% codepen https://codepen.io/dux-soft/pen/XWqJpvm %}

* `column-span: all` hace que la cita ocupe todo el ancho disponible y que las columnas se adapten al cambio. 

* Un hack interesante para el autor de la cita es envolver al autor en un `span` y luego en los estilos `white-space: nowrap;`, de esta manera al momento de adapatarse a diferentes pantallas el guión del autor no se separara del mismo y quedara mas limpio. 

Eso es todo por este post.

## **5. Referencias** <a name="id5"><a/>
{% youtube OXGznpKZ_sA %}

## **6. Conclusiones** <a name="id6"><a/>
* `columns` es una manera breve y sencilla de establecer un sistema rápido de columnas.
* Solo necesitamos 2 valores básicos: la cantidad mínima de columnas y el ancho máximo de cada una de ellas.
* Podemos establecer espaciados entre columnas y tambien un border vertical para estilarlas mejor usando `column-gap` y `column-rule` respectivamente.
* `column-span` es útil para usar el ancho completo del contenedor, por ejemplo para una cita importante. 

---


Posiblemente los siguientes artículos sean de tu interés: 

{% link https://dev.to/duxtech/es6-promesas-en-javascript-5bpb %}

{% link https://dev.to/duxtech/logical-nullish-assignment-en-javascript-4367 %}

{% link https://dev.to/duxtech/local-storage-api-en-javascript-o88 %}