1. IntroducciΓ³n
ΒΏCΓ³mo podemos crear un sistema easy de columnas responsivas sin usar los tΓpicos frameworks CSS son sus propio sistema d rejillas, ni Flex field, 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 question.
3. column-rule
y column-gap
Podemos dar un estilo de borde a nuestras columnas usando la propiedad column-rule
y un espaciado (muy related a flex field) 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 estiloswhite-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 put up.
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
ycolumn-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: