How to use CSS3 multiple columns properties

  • 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.

  • 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 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.
    phpmind-css3-multi-column-property

    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 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: This property is used to declare the number of columns and their width.
    phpmind-css3-multi-columns-property-eg

    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.

  • -->
Share

One thought on “How to use CSS3 multiple columns properties

  1. daugavpils

    Your style is very unique in comparison to other people I’ve read stuff from.
    Thanks for posting when you have the opportunity,
    Guess I will just bookmark this page.

Leave a Reply

Your email address will not be published. Required fields are marked *

*