Scribd
Upload
4 views3 pages

CSS3 Multicolumns

CSS3 allows for multi-column layouts to mimic newspaper structures, utilizing properties such as column-count, column-gap, and column-rule to control the appearance. The document provides an example of how to implement these properties in HTML and CSS to create a multi-column text layout. Additionally, it explains how to modify the layout by removing certain styles for a simpler presentation.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views3 pages

CSS3 Multicolumns

CSS3 allows for multi-column layouts to mimic newspaper structures, utilizing properties such as column-count, column-gap, and column-rule to control the appearance. The document provides an example of how to implement these properties in HTML and CSS to create a multi-column text layout. Additionally, it explains how to modify the layout by removing certain styles for a simpler presentation.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS3 - Multi columns

CSS3 supported multi columns to arrange the text as news paper structure.

Some of most common used multi columns properties as shown below −

Values Description

column- Used to count the number of columns that element should be


count divided

column-fill Used to decide, how to fill the columns

column-gap Used to decide the gap between the columns

column-rule Used to specifies the number of rules

rule-color Used to specifies the column rule color

rule-style Used to specifies the style rule for column

rule-width Used to specifies the width

column-span Used to specifies the span between columns

Example
Below example shows the arrangement of text as new paper structure.

<html>

<head>

<style>

.multi {
/* Column count property */

-webkit-column-count: 4;

-moz-column-count: 4;

column-count: 4;

/* Column gap property */

-webkit-column-gap: 40px;

-moz-column-gap: 40px;

column-gap: 40px;

/* Column style property */

-webkit-column-rule-style: solid;

-moz-column-rule-style: solid;

column-rule-style: solid;

</style>

</head>

<body>

<div class="multi">

Tutorials Point originated from the idea that there exists a class of
readers who respond

better to online content and prefer to learn new skills at their own
pace from the comforts

of their drawing rooms. The journey commenced with a single tutorial on


HTML in 2006 and

elated by the response it generated, we worked our way to adding fresh


tutorials to our
repository which now proudly flaunts a wealth of tutorials and allied
articles on topics

ranging from programming languages to web designing to academics and


much more.

</div>

</body>

</html>

It will produce the following result −

For suppose, if user wants to make text as new paper without line, we can
do this by removing style syntax as shown below

.multi {

/* Column count property */

-webkit-column-count: 4;

-moz-column-count: 4;

column-count: 4;

/* Column gap property */

-webkit-column-gap: 40px;

-moz-column-gap: 40px;

column-gap: 40px;

It will produce the following result −

You might also like