La propiedad de recuento de columnas en CSS se utiliza para dividir una parte del contenido dentro de cualquier elemento HTML en un número determinado de columnas.
Sintaxis:
column-count: number|auto|initial|inherit;
Valor por defecto:
- auto
Valores de propiedad:
- número: Este valor se utiliza para indicar el número de columnas.
- auto: Es el valor por defecto. El número de columnas está determinado por otras propiedades.
- initial: este valor se utiliza para establecer la propiedad en el valor predeterminado.
- heredar: Hereda la propiedad de su padre.
Ejemplo 1:
html
<!-- HTML program to illustrate the
column-count property -->
<!DOCTYPE html>
<html>
<head>
<title>column count property</title>
<style>
.gfg {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; /* divides text in 2 columns */
}
h1 {
color:green;
}
h1, h2 {
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
Example of column-count Property
</h2>
<!-- Text inside below div will be
divided into 2 columns -->
<div class="gfg">
The course is designed for students as
well as working professionals to prepare
for coding interviews. This course is going
to have coding questions from school level
to the level needed for product based
companies like Amazon, Microsoft, Adobe etc.
</div>
</body>
</html>
Producción:
Ejemplo 2:
html
<!-- HTML program for column-count property of CSS -->
<!DOCTYPE html>
<html>
<head>
<title>column count property</title>
<style>
.gfg {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-rule: 10px double green;
-moz-column-rule: 10px double green;
column-rule: 10px double green;
text-align:justify;
}
h1 {
color:green;
}
h1, h2 {
text-align:center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
Example column-count Property
</h2>
<!-- The text inside below div will be divided into
2 columns -->
<div class="gfg">
The course is designed for students as well
as working professionals to prepare for
coding interviews. This course is going to
have coding questions from school level to
the level needed for product based companies
like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
Producción:
Navegador compatible: los navegadores compatibles con la propiedad column-count se enumeran a continuación:
- Google Chrome 50.0, 4.0 -webkit-
- Internet Explorer 10.0
- Firefox 52.0, 2.0 -moz-
- Safari 9.0, 3.1 -webkit-
- Opera 37.0, 15.0 -webkit-, 11.1