- Multiple column As we know that text in columns is easier to read than the widespread long lines. Newspapers follow the rule of multi column layout because the lines are too long to read and understand. This property helps designers to give the look and feel of a newspaper columns with minimal coding.
Browser support: IE 10+ and Opera.
IE 9 and older versions doesn’t support this property.
add -webkit- for safari and chrome.
add -moz- for firefox.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper nibh mauris, non consectetur justo gravida vitae. Proin sed feugiat erat. Praesent eleifend massa in tellus sagittis semper. Nulla tempor tincidunt nisl pharetra varius. Etiam vel sollicitudin quam, ac dictum dolor. Duis porta ultrices ante non aliquam. Fusce in dui quis massa laoreet posuere vitae et risus. Aenean convallis condimentum massa, eget aliquam velit..multicolumn_layout { -moz-column-count:3; /*To support Firefox */ -webkit-column-count:3; /*To support Chrome and Safari*/ column-count:3; } - Column gap: Column gap property helps to provide space between the columns.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper nibh mauris, non consectetur justo gravida vitae. Proin sed feugiat erat. Praesent eleifend massa in tellus sagittis semper. Nulla tempor tincidunt nisl pharetra varius. Etiam vel sollicitudin quam, ac dictum dolor. Duis porta ultrices ante non aliquam. Fusce in dui quis massa laoreet posuere vitae et risus. Aenean convallis condimentum massa, eget aliquam velit.
Nulla tortor purus, accumsan in nulla in, feugiat gravida enim. Donec suscipit mi sed dui pulvinar, et imperdiet velit pretium. Nullam suscipit dictum nibh, quis ultricies sapien pulvinar quis..column_gap{ -moz-column-count:3; /*To support Firefox */ -webkit-column-count:3; /*To support Chrome and Safari*/ column-count:3; -moz-column-gap:30px; /*To support Firefox */ -webkit-column-gap:30px; /* To support Chrome and Safari */ column-gap:30px; } - Column Rules: This CSS3 property helps to stylize the columns by providing width, style and color to the rule between columns. The rule will appear in between the column gap. This is the shorthand property for the column-rule-color, column-rule-style, and column-rule-width properties.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper nibh mauris, non consectetur justo gravida vitae. Proin sed feugiat erat. Praesent eleifend massa in tellus sagittis semper. Nulla tempor tincidunt nisl pharetra varius. Etiam vel sollicitudin quam, ac dictum dolor. Duis porta ultrices ante non aliquam. Fusce in dui quis massa laoreet posuere vitae et risus. Aenean convallis condimentum massa, eget aliquam velit.
Nulla tortor purus, accumsan in nulla in, feugiat gravida enim. Donec suscipit mi sed dui pulvinar, et imperdiet velit pretium. Nullam suscipit dictum nibh, quis ultricies sapien pulvinar quis..column_rule{ -webkit-column-rule: 1px solid #CCCCCC; /*To support Chrome and Safari*/ -moz-column-rule: 1px solid #CCCCCC;/*To support Firefox */ column-rule: 1px solid #CCCCCC; -moz-column-count:3; /*To support Firefox */ -webkit-column-count:3; /*To support Chrome and Safari*/ column-count:3; } - Column width: Column width helps to declare the width of the column. Here it works similar to min-width property.
For example: If our element’s width is 400px.The column gap is 20px and column width is 140px.
400px – 20px =380px/140px = 2.7
The browser can fit 2 columns by utilizing the space provided even if the column count is 3, as there is not enough space for a third column.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper nibh mauris, non consectetur justo gravida vitae. Proin sed feugiat erat. Praesent eleifend massa in tellus sagittis semper. Nulla tempor tincidunt nisl pharetra varius. Etiam vel sollicitudin quam, ac dictum dolor. Duis porta ultrices ante non aliquam. Fusce in dui quis massa laoreet posuere vitae et risus. Aenean convallis condimentum massa, eget aliquam velit..column_width{ column-width:140px; -moz-column-width:140px; /*To support Firefox */ -webkit-column-width:140px; /*To support Safari and Chrome */ } - Column: This property is used to declare the number of columns and their width.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper nibh mauris, non consectetur justo gravida vitae. Proin sed feugiat erat. Praesent eleifend massa in tellus sagittis semper. Nulla tempor tincidunt nisl pharetra varius. Etiam vel sollicitudin quam, ac dictum dolor. Duis porta ultrices ante non aliquam. Fusce in dui quis massa laoreet posuere vitae et risus. Aenean convallis condimentum massa, eget aliquam velit..column_property{ columns:120px 3; -webkit-columns:120px 3; /*To support Safari and Chrome */ -moz-columns:120px 3; /*To support Firefox */ border: 1px solid #d8d8d8; }
