An Interest In:
Web News this Week
- March 22, 2024
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
CSS columns
ndice
- Introduccin
- Sintaxis
column-rule
ycolumn-gap
column-span
- Conclusiones
- Referencias
1. Introduccin
Cmo podemos crear un sistema simple de columnas responsivas sin usar los tpicos 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 fcil 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 mnimas que necesito.column-width
estable el ancho mximo de que cada columna debe tener.columns
es el shorthand que simplifica la sintaxis.
Con sintaxis ya podemos organizar nuestro cdigo 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 mnimo pero en pantallas de dispositivos mas pequeos la cantidad de columnas va disminuyendo en funcin del ancho mximo que le dimos, esto pasa nuevamente sin ningn 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 diseos ms 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 estiloswhite-space: nowrap;
, de esta manera al momento de adapatarse a diferentes pantallas el guin 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 rpido de columnas.- Solo necesitamos 2 valores bsicos: la cantidad mnima de columnas y el ancho mximo de cada una de ellas.
- Podemos establecer espaciados entre columnas y tambien un border vertical para estilarlas mejor usando
column-gap
ycolumn-rule
respectivamente. column-span
es til para usar el ancho completo del contenedor, por ejemplo para una cita importante.
Posiblemente los siguientes artculos sean de tu inters:
ES6: Promesas en JavaScript
Cristian Fernando Oct 14 '21 6 min read
Original Link: https://dev.to/duxtech/css-columns-4c2
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To