Multicolumnas CSS

Disposición de múltiples columnas en CSS

La disposición de múltiples columnas en CSS nos permite definir fácilmente múltiples columnas de texto, al estilo de los periódicos:

La narrativa de los Tres Reinos

El primer capítulo
Los héroes de Yu Tang se unen en tres alianzas
El primer éxito en derribar al héroe de la bandera amarilla

Lo que se dice sobre el gran movimiento del mundo, que se divide por mucho tiempo y se une por mucho tiempo, y que se une por mucho tiempo y se divide por mucho tiempo: al final de la dinastía Zhou, los siete reinos se disputaron y se integraron en Qin; después de que Qin fue derrotado, Chu y Han se disputaron y se integraron en Han; la dinastía Han desde que el emperador Gaozu derribó la serpiente y se levantó en armas, unificó el mundo; más tarde, el renacimiento de Guangwu, transmitido al emperador Xian, se dividió en tres reinos. Se dice que la causa de la confusión comenzó con los emperadores Huandi y Lingdi. El emperador Huandi prohibió a las personas buenas, y creyó en los eunucos. Después de que el emperador Huandi murió, el emperador Lingdi ascendió al trono, el general grande Dou Wu y el eunuco Chen Fan, lo ayudaron a gobernar; en ese momento, los eunucos Cao Jie y otros jugaban un papel, Dou Wu y Chen Fan planeaban matarlos, pero el asunto no fue guardado en secreto, y fueron asesinados por ellos, y desde entonces los eunucos se volvieron cada vez más poderosos. El día quince del mes de abril del segundo año de Jianning, el emperador fue al Palacio Wende. Justo cuando estaba subiendo al asiento, una fuerte ráfaga de viento se levantó en la esquina del palacio. Solo vieron una gran serpiente verde volar desde el techo, envolverse en la silla. El emperador se desmayó, y los sirvientes a su alrededor lo ayudaron a regresar al palacio, y todos los funcionarios huyeron. De repente, la serpiente desapareció. De repente, llovió y granizó, y la lluvia no paró hasta la medianoche, destruyendo innumerables edificios. En el segundo mes del cuarto año de Jianning, hubo un terremoto en Luoyang; también, el mar se desbordó, y todos los residentes de la costa fueron arrastrados por las olas al mar. En el primer año de Guanghao, una gallina hembra se convirtió en un gallo. El primer día del sexto mes, una nube negra de más de diez zhang voló al Palacio Wende. En el séptimo mes de otoño, un arco iris apareció en el Yutang, y las montañas de Wu yuan se desmoronaron. Todo tipo de infortunios, no solo uno. El emperador emitió un edicto preguntando a los funcionarios sobre la causa de los desastres, el consejero de estado Cai Yong presentó una solicitud, afirmando que el desprendimiento de la nube y la transformación de la gallina en un gallo eran el resultado de la intervención de las mujeres y los eunucos en la política, y sus palabras eran muy directas. El emperador, al leer la solicitud, suspiró y se levantó para cambiar de ropa. Cao Jie lo observó a su espalda y anunció a todos los sirvientes; luego lo envió a juicio por otros asuntos y lo envió a trabajar en el campo. Después de eso, Zhang Rang, Zhao Zhong, Feng Yu, Duan Gui, Cao Jie, Hou Luan, JIan Shuo, Cheng Kuang, Xia Yun, Guo Sheng, diez personas se juntaron para cometer malas acciones, conocidas como los 'Diez Eunucos Permanentes'. El emperador tenía gran confianza en Zhang Rang, llamándolo 'Padre'. La política del palacio se volvió cada vez peor, lo que llevó a que la gente del mundo se sintiera desordenada y los ladrones y saqueadores se levantaran en masa.

...... ......

CSS Multi-column Properties

...... ......

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

In this chapter, you will learn the following multi-column properties:

Browser Support

Property The numbers in the table indicate the first browser version that fully supports this property. Chrome IE Firefox Safari
column-count 71.0 50.0 10.0 52.0 9.0
column-gap 71.0 50.0 10.0 52.0 9.0
column-rule 71.0 50.0 10.0 52.0 9.0
column-rule-color 71.0 50.0 10.0 52.0 9.0
column-rule-style 71.0 50.0 10.0 52.0 9.0
column-rule-width 71.0 50.0 10.0 52.0 9.0
column-span 71.0 50.0 Opera 52.0 9.0
column-width 71.0 50.0 10.0 52.0 9.0

37.0

column-count CSS Create Multi-column

Property specifies the number of columns that the element should be divided into.

Example

div {
  The following example divides the text within the <div> element into 3 columns:
}

Try It Yourself

column-count: 3;

column-gap CSS Specify Column Gap

Property specifies the spacing between columns.

Example

div {
  The following example specifies that the gap between columns should be 40 pixels:
}

Try It Yourself

column-gap: 40px;

column-rule-style CSS Column Rules

Example

div {
  Property specifies the style of the rule between columns:
}

Try It Yourself

column-rule-width column-rule-style: solid;

Example

div {
  Property specifies the width of the rule between columns:
}

Try It Yourself

column-rule-color column-rule-width: 1px;

Example

div {
  Property specifies the color of the rule between columns:
}

Try It Yourself

The column-rule property is a shorthand attribute used to set all the column-rule-* properties mentioned above.

The following example sets the width, style, and color of the rule between columns:

Example

div {
  column-rule: 1px solid lightblue;
}

Try It Yourself

Specify how many columns the element should span horizontally

column-span Property specifies how many columns the element should span.

The following example specifies that the <h2> element should span all columns:

Example

h2 {
  column-span: all;
}

Try It Yourself

Specify column width

column-width Property specifies the suggested optimal width for columns.

The following example specifies that the suggested optimal width for columns should be 100px:

Example

div {
  column-width: 100px;
}

Try It Yourself

CSS Multi-column Properties

The following table lists all multi-column properties:

Property Description
column-count Define the number of columns that the element should be divided into.
column-fill Define how columns are filled.
column-gap Specify the gap between columns.
column-rule Used to set the shorthand attribute for all column-rule-* properties.
column-rule-color Define the color of the rule between columns.
column-rule-style Define the rule style between columns.
column-rule-width Define the rule width between columns.
column-span Especificar cuántas columnas debe cruzar un elemento.
column-width Especificar el ancho óptimo recomendado para las columnas.
columns Atributo abreviado para establecer column-width y column-count.