Multiple Columns
Dividing the page into multiple columns can help the user to interact with the page. Multiple columns of text can be defined using a CSS multi-column layout. We use the column-count attribute to specify the number of columns on a page as per our requirement. In addition, we use multiple columns properties to define the column design, gaps, size, appearance, layout, number of columns etc. These are known as column rules and their properties.
The highest version of browsers in which all the properties of CSS Multiple Column will support:
1. Chrome - 50.0
2. Internet Explorer - 10.0
3. Mozilla Firefox - 71.0
4. Safari - 9.0
5. Opera Mini - 37.0
As CSS provide eight properties for designing and making the multiple columns more engaging:-
- 1. column-count: For the gaps between the columns (e.g., 40px)
- 2. column-gap: For the gaps between the columns (e.g., 40px).
- 3. column-rule-style: For the width between the columns (e.g., 1px).
- 4. column-rule-width: For the width between the columns (e.g., 1px).
- 5. column-rule-color: Color of the rule between the columns.
- 6.Column-span: For column span (e.g., 2/5).
- 7. Column-width: For optimal width of the columns (e.g., 50/100px).
- 8. column-rule: It is a shorthand property use to design the column through column-rule*.
There is also a property called column-fill, which is used to define the way how to fill the column.
Example No.1:
<![CDATA[
<html>
<html lang="en-US">
<style>
.newspaper {
column-count: 3;
}
</style>
</head>
<body>
<div class="newspaper">
Online learning website knowledge2life
Online learning website knowledge2life
Online learning website knowledge2life
Online learning website knowledge2life
Online learning website knowledge2life
Online learning website knowledge2life
</div>
</body>
</html>]]>
OUTPUT:
Online learning website knowledge2life
Online learning website knowledge2life Online learning website knowledge2life Online learning website knowledge2life Online learning website knowledge2lifeOnline learning website knowledge2life
Example No.2:
<![CDATA[
<html>
<html lang="en-US">
<style>
.newspaper {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class="newspaper">
Online learning website knowledge2life
Online learning website knowledge2life
Online learning website knowledge2life
Online learning website knowledge2life
Online learning website knowledge2life
Online learning website knowledge2life
</div>
</body>
</html>]]>
OUTPUT:
Online learning website knowledge2life Online learning website knowledge2life Online learning website knowledge2life Online learning website knowledge2life Online learning website knowledge2lifeOnline learning website knowledge2life
