Tironemota

▲
CSS

Propiedades CSS columna multiple
28-07-2022

column-count 28-07-2022

La propiedad column-count especifica el número de columnas en las que debe dividirse un elemento.

Valor por defecto: auto

Sintaxis: column-count: número | auto | initial | inherit;

Valores de propiedad:

  • número - El número óptimo de columnas en las que fluirá el contenido del elemento.
  • auto - Valor por defecto. El número de columnas se determinará por otras propiedades, como por ejemplo "column-width".
  • initial - Establece esta propiedad a su valor predeterminado.
  • inherit - Hereda esta propiedad de su elemento padre.

Nota: La propiedad column-count no es compatible con Internet Explorer 9 y versiones anteriores.

column-count: auto 
<div>
    <h2>Propiedad column-count: auto</h2>
    <div id="columna">TEXTO</div>
</div>
div#columna {
    -webkit-column-count: auto; /* Chrome, Safari, Opera */
    -moz-column-count: auto; /* Firefox */
    column-count:  ;
}

Propiedad column-count: auto

Aunque con las herramientas que ya conocemos somos capaces de crear columnas, CSS ha introducido una serie de propiedades que pretenden facilitar el diseño de elementos web en columnas. Vamos a estudiar las propiedades column-count, column-width, columns, colum-gap y column-rule. La propiedad column-count especifica el número de columnas en las que debe dividirse un elemento. La propiedad column-count no es compatible con Internet Explorer 9 y versiones anteriores.
Arriba ... ⇑

column-fill 28-07-2022

La propiedad column-fill especifica cómo rellenar columnas, equilibradas o no.

Valor por defecto: balance

Sintaxis: column-fill: balance | auto | initial | inherit;

Valores de propiedad:

  • balance - Valor por defecto. Las columnas están equilibradas. Los navegadores deben minimizar la variación en la longitud de la columna.
  • auto - Las columnas se rellenan secuencialmente y tendrán diferentes longitudes.
  • initial - Establece esta propiedad a su valor predeterminado.
  • inherit - Hereda esta propiedad de su elemento padre.

Nota: La propiedad column-fill solo funciona en Firefox.

column-fill: balance 
<div>
    <h2>Propiedad column-fill: balance</h2>
    <div id="columna2">TEXTO</div>
</div>
div#columna2 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-fill: balance; /* Chrome, Safari, Opera */
    -moz-column-fill: balance; /* Firefox */

    column-fill:  ;
}

Propiedad column-fill: balance

Aunque con las herramientas que ya conocemos somos capaces de crear columnas, CSS ha introducido una serie de propiedades que pretenden facilitar el diseño de elementos web en columnas. Vamos a estudiar las propiedades column-count, column-width, columns, colum-gap y column-rule. La propiedad column-fill especifica cómo rellenar columnas, equilibradas o no. La propiedad column-fill solo funciona en Firefox.
Arriba ... ⇑

column-gap 28-07-2022

La propiedad column-gap especifica el espacio entre las columnas.

Nota: Si hay una column-rule entre columnas, aparecerá en medio del espacio.

Valor por defecto: normal

Sintaxis: column-gap: longitud | normal | initial | inherit;

Valores de propiedad:

  • longitud - Una longitud especificada que establecerá el espacio entre las columnas.
  • normal - Valor por defecto. Especifica un espacio normal entre las columnas. W3C sugiere un valor de 1em.
  • initial - Establece esta propiedad a su valor predeterminado.
  • inherit - Hereda esta propiedad de su elemento padre.

Nota: IE 9 y versiones anteriores no admiten las propiedades de columnas.

column-gap: normal 
<div>
    <h2>Propiedad column-gap: normal</h2>
    <div id"columna3">TEXTO</div>
</div>
div#columna3 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: normal; /* Chrome, Safari, Opera */
    -moz-column-gap: normal; /* Firefox */

    column-gap:  ;
}

Propiedad column-gap: normal

Aunque con las herramientas que ya conocemos somos capaces de crear columnas, CSS ha introducido una serie de propiedades que pretenden facilitar el diseño de elementos web en columnas. Vamos a estudiar las propiedades column-count, column-width, columns, colum-gap y column-rule. La propiedad column-gap especifica el espacio entre las columnas. La propiedad column-count no es compatible con Internet Explorer 9 y versiones anteriores.
Arriba ... ⇑

column-rule 28-07-2022

La propiedad column-rule es una propiedad abreviada para establecer todas las propiedades column-rule-*.

La propiedad column-rule establece el ancho, el estilo y el color de la regla entre columnas.

Valor por defecto: medium none color

Sintaxis: column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;

Valores de propiedad:

  • column-rule-width - Establece el ancho de la regla entre columnas. El valor predeterminado es medium.
  • column-rule-style - Establece el estilo de la regla entre columnas. El valor predeterminado es none.
  • column-rule-color - Establece el color de la regla entre columnas. El valor predeterminado es el color del elemento.
  • initial - Establece esta propiedad a su valor predeterminado.
  • inherit - Hereda esta propiedad de su elemento padre.
column-rule: medium none 
<div>
    <h2>Propiedad column-rule: medium none</h2>
    <div id"columna4">TEXTO</div>
</div>
div#columna4 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule: column-rule: medium none; /* Chrome, Safari, Opera */
    -moz-column-rule: column-rule: medium none; /* Firefox */

    column-rule:  ;
}

Propiedad column-rule:
medium none

Aunque con las herramientas que ya conocemos somos capaces de crear columnas, CSS ha introducido una serie de propiedades que pretenden facilitar el diseño de elementos web en columnas. Vamos a estudiar las propiedades column-count, column-width, columns, colum-gap y column-rule. La propiedad column-rule es una propiedad abreviada para establecer todas las propiedades column-rule- *.
Arriba ... ⇑

column-rule-color 02-08-2022

La propiedad column-rule-color especifica el color de la regla entre columnas.

Valor por defecto: El color actual del elemento

Sintaxis: column-rule-color: color | initial | inherit;

Valores de propiedad:

  • color - Especifica el color de la regla. Consulte la tabla de colores para obtener posibles valores de color.
  • initial - Establece esta propiedad a su valor predeterminado.
  • inherit - Hereda esta propiedad de su elemento padre.
column-rule-color: initial 
<div>
    <h2>Propiedad column-rule-color: initial</h2>
    <div id"columna5">TEXTO</div>
</div>
div#columna5 {
    -webkit-column-count: 3; -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 40px; -moz-column-gap: 40px;
    column-gap: 40px;
    -webkit-column-rule-style: outset; -moz-column-rule-style: outset;
    column-rule-style: outset;
    -webkit-column-rule-color: initial; -moz-column-rule-color: initial;

    column-rule-color:  ;
}

Propiedad column-rule-color:
initial

Aunque con las herramientas que ya conocemos somos capaces de crear columnas, CSS ha introducido una serie de propiedades que pretenden facilitar el diseño de elementos web en columnas. Vamos a estudiar las propiedades column-count, column-width, columns, colum-gap y column-rule. La propiedad column-rule-color especifica el color de la regla entre columnas.
Arriba ... ⇑

column-rule-style 02-08-2022

La propiedad column-rule-style especifica el estilo de la regla entre columnas.

Valor por defecto: none

Sintaxis: column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Valores de propiedad:

  • none - Valor por defecto. No define ninguna regla.
  • hidden - Define una regla oculta.
  • dotted - Define una regla punteada.
  • dashed - Define una regla discontinua.
  • solid - Define una regla sólida.
  • double - Define una regla doble.
  • groove - Especifica una regla acanalada en 3D. El efecto depende del ancho y los valores de color.
  • ridge - Especifica una regla estriada en 3D. El efecto depende del ancho y los valores de color.
  • inset - Especifica una regla de inserción 3D. El efecto depende del ancho y los valores de color.
  • outset - Especifica una regla de inicio 3D. El efecto depende del ancho y los valores de color.
  • initial - Establece esta propiedad a su valor predeterminado.
  • inherit - Hereda esta propiedad de su elemento padre.
column-rule-style: none 
<div>
    <h2>Propiedad column-rule-style: none</h2>
    <div id"columna6">TEXTO</div>
</div>
div#columna6 {
    -webkit-column-count: 3; -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 40px; -moz-column-gap: 40px;
    column-gap: 40px;
    -webkit-column-rule-color: red; -moz-column-rule-color: red;
    column-rule-color: red;
    -webkit-column-rule-style: none; -moz-column-rule-style: none;

    column-rule-style:  ;
}

Propiedad column-rule-style:
none

Aunque con las herramientas que ya conocemos somos capaces de crear columnas, CSS ha introducido una serie de propiedades que pretenden facilitar el diseño de elementos web en columnas. Vamos a estudiar las propiedades column-count, column-width, columns, colum-gap y column-rule. La propiedad column-rule-style especifica el estilo de la regla entre columnas.
Arriba ... ⇑

column-rule-width 02-08-2022

La propiedad column-rule-width especifica el ancho de la regla entre columnas.

Valor por defecto: medium

Sintaxis: column-rule-width: medium | thin | thick | longitud | initial | inherit;

Valores de propiedad:

  • medium - Valor por defecto. Define una regla media.
  • thin - Define una regla delgada.
  • thick - Define una regla gruesa.
  • longitud - Especifica el ancho de la regla.
  • initial - Establece esta propiedad a su valor predeterminado.
  • inherit - Hereda esta propiedad de su elemento padre.
column-rule-width: medium 
<div>
    <h2>Propiedad column-rule-width: medium</h2>
    <div id"columna7">TEXTO</div>
</div>
div#columna7 {
    -webkit-column-count: 3; -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 40px; -moz-column-gap: 40px;
    column-gap: 40px;
    -webkit-column-rule-style: outset; -moz-column-rule-style: outset;
    column-rule-style: outset;
    -webkit-column-rule-width: medium; -moz-column-rule-width: medium;

    column-rule-width:  ;
}

Propiedad column-rule-width:
medium

Aunque con las herramientas que ya conocemos somos capaces de crear columnas, CSS ha introducido una serie de propiedades que pretenden facilitar el diseño de elementos web en columnas. Vamos a estudiar las propiedades column-count, column-width, columns, colum-gap y column-rule. La propiedad column-rule-width especifica el ancho de la regla entre columnas.
Arriba ... ⇑

column-span 02-08-2022

La propiedad column-span especifica cuántas columnas un elemento debe abarcar.

Valor por defecto: none

Sintaxis: column-span: none | all | initial | inherit;

Valores de propiedad:

  • none - Valor por defecto. El elemento debe abarcar una columna.
  • all - El elemento debe abarcar todas las columnas.
  • initial - Establece esta propiedad a su valor predeterminado.
  • inherit - Hereda esta propiedad de su elemento padre.
column-span: none 
<div id"columna8">
    <h2>Propiedad column-span: none</h2>
    TEXTO
</div>
div#columna8 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
h2 {
    text-align:center;
    -webkit-column-span: none;
    -moz-column-span: none;

    column-span:  ;
}

Propiedad column-span: none

Aunque con las herramientas que ya conocemos somos capaces de crear columnas, CSS ha introducido una serie de propiedades que pretenden facilitar el diseño de elementos web en columnas. Vamos a estudiar las propiedades column-count, column-width, columns, colum-gap y column-rule. La propiedad column-span especifica cuántas columnas un elemento debe abarcar.
Arriba ... ⇑

column-width 02-08-2022

La propiedad column-width especifica una anchura óptima sugerida para las columnas.

Valor por defecto: auto

Sintaxis: column-width: auto | longitud | initial | inherit;

Valores de propiedad:

  • auto - Valor por defecto. El ancho de la columna será determinado por el navegador.
  • longitud - Una longitud que especifica el ancho de las columnas.
  • initial - Establece esta propiedad a su valor predeterminado.
  • inherit - Hereda esta propiedad de su elemento padre.
column-width: auto 
<div>
    <h2>Propiedad column-width: auto</h2>
    <div id"columna9">TEXTO</div>
</div>
div#columna9 {
    -webkit-column-width: auto; /* Chrome, Safari, Opera */
    -moz-column-width: auto; /* Firefox */

    column-width:  ;
}

Propiedad column-width:
auto

Aunque con las herramientas que ya conocemos somos capaces de crear columnas, CSS ha introducido una serie de propiedades que pretenden facilitar el diseño de elementos web en columnas. Vamos a estudiar las propiedades column-count, column-width, columns, colum-gap y column-rule. La propiedad column-width especifica una anchura óptima sugerida para las columnas.
Arriba ... ⇑

columns 02-08-2022

La propiedad columns es una propiedad abreviada para establecer el ancho de columna (column-width) y el recuento de columnas (column-count).

Valor por defecto: auto auto

Sintaxis: columns: auto | column-width column-count | initial | inherit;

Valores de propiedad:

  • auto - Valor por defecto. Establece el ancho de columna en "auto" y el recuento de columnas en "auto".
  • column-width - El ancho de las columnas.
  • column-count - El número de columnas.
  • initial - Establece esta propiedad a su valor predeterminado.
  • inherit - Hereda esta propiedad de su elemento padre.
columns: auto auto 
<div>
    <h2>Propiedad columns: auto auto</h2>
    <div id"columna10">TEXTO</div>
</div>
div#columna10 {
    -webkit-columns: auto auto; /* Chrome, Safari, Opera */
    -moz-columns: auto auto; /* Firefox */

    columns:  ;
}

Propiedad columns:
auto auto

Aunque con las herramientas que ya conocemos somos capaces de crear columnas, CSS ha introducido una serie de propiedades que pretenden facilitar el diseño de elementos web en columnas. Vamos a estudiar las propiedades column-count, column-width, columns, colum-gap y column-rule. La propiedad columns es una propiedad abreviada para establecer el ancho de columna (column-width) y el recuento de columnas (column-count).
Arriba ... ⇑