07-26-2023, 07:23 PM
Example:
<!DOCTYPE html>
<html>
<head>
<title>Multi-column Layout Example</title>
<style>
/* Create a multi-column layout for the paragraph */
p {
column-count: 3;
column-gap: 20px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus odio id facilisis iaculis.
Pellentesque vel enim nec elit eleifend malesuada nec a erat.
</p>
</body>
</html>
Explanation:
Multi-column layout (column-count) allows you to split the content of an element into multiple columns. In this example, the p element is divided into three columns, and a gap of 20 pixels is added between the columns.
<!DOCTYPE html>
<html>
<head>
<title>Multi-column Layout Example</title>
<style>
/* Create a multi-column layout for the paragraph */
p {
column-count: 3;
column-gap: 20px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus odio id facilisis iaculis.
Pellentesque vel enim nec elit eleifend malesuada nec a erat.
</p>
</body>
</html>
Explanation:
Multi-column layout (column-count) allows you to split the content of an element into multiple columns. In this example, the p element is divided into three columns, and a gap of 20 pixels is added between the columns.