CSS columns 🎨

Índice

Introducción
Sintaxis

column-rule y column-gap

column-span
Conclusiones
Referencias

1. Introducción

¿Cómo podemos crear un sistema simple de columnas responsivas sin usar los típicos frameworks CSS son sus propio si…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Cristian Fernando

Índice

  1. Introducción
  2. Sintaxis
  3. column-rule y column-gap
  4. column-span
  5. Conclusiones
  6. Referencias

1. Introducción

¿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

columns es en realidad un shorthand de las propiedades column-count y column-width:

.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:

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

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:

4. column-span

Con column-span podemos lograr diseños más bonitos entre las columnas del documento, considera el siguiente ejemplo:

  • 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

6. Conclusiones

  • 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:

duxtech

ES6: Promesas en JavaScript

Cristian Fernando ・ Oct 14 '21 ・ 6 min read

#javascript #webdev #beginners #spanish
duxtech

Logical Nullish Assignment ??= en JavaScript

Cristian Fernando ・ Mar 5 ・ 2 min read

#javascript #webdev #spanish
duxtech

Local Storage API en JavaScript 🍂

Cristian Fernando ・ Aug 2 '21 ・ 3 min read

#javascript #html #webdev #spanish


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Cristian Fernando


Print Share Comment Cite Upload Translate Updates
APA

Cristian Fernando | Sciencx (2022-10-19T00:35:06+00:00) CSS columns 🎨. Retrieved from https://www.scien.cx/2022/10/19/css-columns-%f0%9f%8e%a8/

MLA
" » CSS columns 🎨." Cristian Fernando | Sciencx - Wednesday October 19, 2022, https://www.scien.cx/2022/10/19/css-columns-%f0%9f%8e%a8/
HARVARD
Cristian Fernando | Sciencx Wednesday October 19, 2022 » CSS columns 🎨., viewed ,<https://www.scien.cx/2022/10/19/css-columns-%f0%9f%8e%a8/>
VANCOUVER
Cristian Fernando | Sciencx - » CSS columns 🎨. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/19/css-columns-%f0%9f%8e%a8/
CHICAGO
" » CSS columns 🎨." Cristian Fernando | Sciencx - Accessed . https://www.scien.cx/2022/10/19/css-columns-%f0%9f%8e%a8/
IEEE
" » CSS columns 🎨." Cristian Fernando | Sciencx [Online]. Available: https://www.scien.cx/2022/10/19/css-columns-%f0%9f%8e%a8/. [Accessed: ]
rf:citation
» CSS columns 🎨 | Cristian Fernando | Sciencx | https://www.scien.cx/2022/10/19/css-columns-%f0%9f%8e%a8/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts