+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: Multi-column layout in CSS3 (/showthread.php?tid=5181)
Multi-column layout in CSS3 - Qomplainerz - 07-26-2023
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.