El módulo Diseño de varias columnas de CSS es una herramienta poderosa que le permite crear fácilmente diseños de varias columnas para sus páginas web. El auge del diseño receptivo significa que es importante entender cómo usar este módulo.
Puede usar las propiedades de las columnas para crear diseños flexibles y dinámicos que se adapten a diferentes tamaños de pantalla.
Especificación del número de columna, el ancho y el espacio
Para crear un diseño de varias columnas apropiado para el contenido de su página, debe comenzar por decidir cuántas columnas desea que abarque. Una de las propiedades más importantes en el módulo Multi-columna es la recuento de columnas propiedad, que utiliza para establecer el número de columnas para dividir el contenido.
Por ejemplo:
.envase {
recuento de columnas: 3;
}
También puede especificar el ancho y el espacio de las columnas. Puede establecer el valor de ancho de columna usando cualquiera de las unidades CSS admitidas como píxeles, ellos, o %.
Si ancho de columna
se establece en auto, el navegador calculará el ancho de cada columna en función de la recuento de columnas propiedad y el espacio disponible dentro de su distribución.Por ejemplo, este CSS declara 3 columnas, cada una con un ancho de 200 píxeles:
.envase {
recuento de columnas: 3;
ancho de columna: 200píxeles;
}
El espacio entre columnas La propiedad especifica el espacio entre las columnas en un diseño de varias columnas. Establecerá el tamaño de los espacios en blanco vacíos entre columnas adyacentes y puede tomar un valor de longitud en píxeles, ems o cualquier otra unidad admitida.
Por ejemplo:
.envase {
recuento de columnas: 3;
espacio entre columnas: 20píxeles; /* establece el espacio entre columnas en 20 píxeles */
}
Por defecto, el valor de espacio entre columnas se establece en normal. Su navegador elige este valor para lograr un espacio constante entre las columnas en su diseño sin dejar de ser agradable a la vista. Este valor también puede variar entre navegadores y también puede depender del tamaño de la fuente, la altura de la línea, propiedad de posicióny otras propiedades de diseño del contenido de las columnas.
Asegurándose de que las columnas estén equilibradas
Las columnas CSS intentan llenar todo el espacio disponible dentro de un diseño. Esto a veces puede resultar en columnas que tienen alturas significativamente diferentes, lo que hace que el diseño se vea desigual.
Para equilibrar las columnas, debe asegurarse de que cada columna de su diseño tenga aproximadamente la misma cantidad de contenido.
Puede lograr esto configurando el CSS relleno de columna propiedad a balance. Luego, un navegador intentará distribuir el contenido de manera uniforme en todas las columnas para que tengan aproximadamente la misma altura.
El relleno de columna la propiedad se establece en balance por defecto, pero un valor de auto cambiará este comportamiento. El uso automático distribuye el contenido entre columnas según el espacio disponible. Esto puede dar como resultado un espacio desigual entre columnas y alturas de columna desiguales. Incluso puede producir un diseño con columnas vacías.
He aquí un ejemplo de cómo usar el relleno de columna propiedad para equilibrar columnas en un diseño de varias columnas:
.multi-columna-diseño {
recuento de columnas: 3;
espacio entre columnas: 20píxeles;
relleno de columna: balance;
}
En este ejemplo, tenemos un diseño de varias columnas con tres columnas y un espacio de 20 píxeles entre cada columna. Al establecer el relleno de columna propiedad a balance, nos aseguramos de que el contenido se distribuya uniformemente en las columnas, lo que da como resultado alturas de columna equilibradas.
Es importante notar que el relleno de columna La propiedad puede no funcionar bien para todos los diseños y puede resultar en un espacio desigual entre las columnas. En tales casos, es posible que deba usar JavaScript para equilibrar manualmente las columnas. Recuerde seguir las mejores prácticas y utilizar mejora progresiva para que no confíes en JavaScript.
Poniendolo todo junto
Puede reunir todo lo que ha aprendido sobre la implementación de un diseño con columnas CSS y usarlo para crear un diseño estilo revista.
Primero, cree la estructura HTML básica. Use un elemento contenedor para envolver su contenido, luego cree varios elementos secundarios que luego puede distribuir en columnas.
html>
<html>
<cabeza>
<enlacereal="hoja de estilo"href="CSScolumns.css" />
cabeza>
<cuerpo>
Elemento contenedor
<divisiónclase="diseño de revista">Elementos secundarios
<divisiónclase="artículo">
<h2>Título del artículoh2><pag>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed en
magna vel lorem pharetra bibendum.pag>
división><divisiónclase="artículo">
<h2>Título del artículoh2><pag>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed en
magna vel lorem pharetra bibendum.pag>
división><divisiónclase="artículo">
<h2>Título del artículoh2><pag>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed en
magna vel lorem pharetra bibendum.pag>
división>
división>
cuerpo>
html>
Para crear un diseño estilo revista usando el módulo CSS Multi-column, combine el recuento de columnas, ancho de columna, espacio entre columnas, y relleno de columna propiedades:
.magazine-layout {
recuento de columnas: 3;
ancho de columna: 300píxeles;
espacio entre columnas: 20píxeles;
relleno de columna: balance;
}
.artículo {
color de fondo: #f8f8f8;
borde-radio: 4píxeles;
sombra de la caja: 0 2píxeles 4píxelesrgb(0, 0, 0, 0.1);
relleno: 10píxeles;
irrumpir en el interior: evitar-columna;
}
Este ejemplo también define el irrumpir en el interior propiedad en el .artículo clase, con un valor de evitar-columna. La propiedad garantiza que cada artículo permanezca en una sola columna, en lugar de dividirse en varias columnas. Así es como debería verse el diseño:
Uso de respaldos para navegadores no compatibles
Es importante señalar que el recuento de columnas La propiedad no es compatible con todos los navegadores. Navegadores que no son compatibles recuento de columnas, mostrará el contenido en una sola columna en su lugar.
Para proporcionar estilos alternativos para navegadores no compatibles, puede usar consultas de características como @apoya para detectar el apoyo a la recuento de columnas propiedad y proporcionar estilos alternativos cuando la propiedad no es compatible.
Por ejemplo:
.envase {
/* Alternativa para navegadores que no admiten el recuento de columnas */
ancho: 100%;
}
/* Detectar soporte para conteo de columnas */
@apoya (recuento de columnas:3) {
.envase {
recuento de columnas: 3;
}
}
En este ejemplo, usamos el @apoya consulta de características para detectar soporte para el recuento de columnas propiedad. Si el navegador admite el recuento de columnas, el envase elemento se mostrará en tres columnas. Si el navegador no admite el recuento de columnas, mostrará el contenido en una sola columna usando el ancho propiedad.
División del contenido en columnas
En general, las columnas CSS brindan una forma práctica y poderosa de crear diseños de varias columnas flexibles y con capacidad de respuesta que mejoran la usabilidad y la experiencia del usuario del contenido web.
Al usar columnas CSS y JavaScript juntos, puede crear diseños aún más sofisticados y dinámicos que se adaptan a diferentes preferencias de usuario y tamaños de dispositivos, haciendo que su contenido web sea más accesible y atractivo para sus usuarios.