Varias columnas en CSS

CSS | varias columnas: En este tutorial, vamos a aprender cómo hacer varias columnas en HTML con CSS?

CSS | Múltiples Columnas

Esta propiedad CSS permite definir la disposición de columnas de contenidos y se envuelven en varias columnas con hueco y reglas entre ellos.

Hay propiedades de la columna múltiples que se enumeran a continuación,

  1. columna-count
  2. columna-gap
  3. columna en reglas de estilo
  4. columna en reglas de anchura
  5. Columna regla de color
  6. columna en reglas
  7. columna lapso
  8. columna de ancho

Vamos a discutir cada una propiedad por uno.

1) propiedad de la columna de recuento

El propiedad de la columna de recuento se utiliza para contar el número de columnas de un elemento debe estar dividido en.

Sintaxis:

Element {
column-count: 4;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
column-count: 4;
}
</style>
</head>
<body>
<div>
this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property
</div>
</body>
</html>

salida

Multiple columns in CSS - 4

En el ejemplo anterior, el contenido se divide en 4 columnas.

2) Propiedad columna-gap

El propiedad de la columna-gap se utiliza para especificar el espacio o hueco entre las columnas.

Sintaxis:

Element {
column-gap: 30px;
}

salida

<!DOCTYPE html>
<html>
<head>
<style>
div {
column-count: 3;
column-gap: 30px;
}
</style>
</head>
<body>
<div>
this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property
</div>
</body>
</html>

salida

Multiple columns in CSS - 5

En el ejemplo anterior, la brecha entre diferentes columnas es 30px.

3) Construcción-estilo regla columna

El propiedad de estilo imperio columna se utiliza para especificar el estilo entre las columnas.

Sintaxis:

Element {
column-rule-style: solid;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule-style: solid;
}
</style>
</head>
<body>
<div>
this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property
</div>
</body>
</html>

salida

Multiple columns in CSS - 6

En el ejemplo anterior, la propiedad de estilo regla columna está ajustado a decir sólida una línea continua se establece entre las columnas.

propiedad 4) de columna de regla de ancho

El columna en reglas de ancho de propiedad se utiliza para especificar la anchura de la regla que se establece entre las columnas.

Sintaxis:

Element {
column-rule-width: 2px;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
column-count: 3;
column-rule-style: solid;
column-rule-width: 2px;
}
</style>
</head>
<body>
<div>
this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property
</div>
</body>
</html>

salida

Multiple columns in CSS - 7

En el ejemplo anterior, la anchura de línea entre las columnas es de 2px.

propiedad 5) columna de regla de color

El propiedad de la columna en reglas color se utiliza para especificar el color de la norma que se utiliza entre las columnas.

Sintaxis:

Element {
column-rule-color: blue;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
column-count: 3;
column-rule-style: solid;
column-rule-color: red;
}
</style>
</head>
<body>
<div>
this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property
</div>
</body>
</html>

salida

Multiple columns in CSS - 8

En el ejemplo anterior, el color de la línea entre las columnas se establece en rojo.

6) Propiedad columna en reglas

El columna-regla de propiedad se usa como abreviatura de la columna en reglas de estilo , columna en reglas de anchura y propiedades en conjunto columna-regla color .

Sintaxis:

Element {
column-rule: 1px solid green;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
column-count: 3;
column-rule: 4px solid green;
}
</style>
</head>
<body>
<div>
this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property
</div>
</body>
</html>

salida

Multiple columns in CSS - 9

En el ejemplo anterior, la propiedad abreviada columna-regla se utiliza.

7) propiedad de la columna lapso

El columna de tramos de propiedad especifica el número de columnas de un elemento debe extenderse a lo largo.

Sintaxis:

Element {
column-span: all;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
column-count: 3;
column-rule: 4px solid green;
column-span: all;
}
</style>
</head>
<body>
<div>
this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property
</div>
</body>
</html>

salida

Multiple columns in CSS - 10

En el ejemplo anterior, la columna de envergadura es atravesado a través de todas las columnas.

propiedad 8) columna de ancho

El propiedad de la columna de anchura se utiliza para especificar el ancho de cada columna.

Sintaxis:

Element {
column-width: 100px;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
column-count: 2;
column-width: 100px;
}
</style>
</head>
<body>
<div>
this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property this is multiple column CSS property
</div>
</body>
</html>

salida

Multiple columns in CSS - 11

En el ejemplo anterior, se utiliza la columna de ancho de 100px.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *