Here I am giving an HTML and CSS example of multi-column layout. By using the below code, you would be able to create 4 columns design for a web page.

CSS Multi-Column (4 Columns) Layout

Add the following CSS in <head> section of an HTML page. CSS properties are defined for class "multicol" to create 4 columns layout.

 <style>
        body {
            font-family: 'Open Sans', sans-serif;
        }
        
        .multicol {
            position: relative;
            margin: auto;
            max-width: 960px;
            -webkit-columns: 4 12em;
            columns: 4 12em;
            -webkit-column-gap: 2em;
            column-gap: 2em;
            -webkit-column-rule: 1px solid red;
            column-rule: 1px solid red;
        }
        
        .multicol p {
            padding: 0.25em;
        }
        
        .multicol figure {
            margin: 0;
            padding: 0;
            width: 100%;
        }
        
        .multicol figcaption {
            color: #999;
            font-size: 0.7em;
        }
        
        .multicol img {
            width: 100%;
        }
        
        .multicol h1 {
            -webkit-column-span: all;
            column-span: all;
            margin: 0.25em 0;
            padding: 0;
            text-transform: uppercase;
            font-size: 2em;
        }
        
        .multicol h2 {
            margin: 0.25em 0;
            padding: 0;
            text-transform: uppercase;
            font-weight: normal;
            font-size: 1.2em;
        }
    </style>

HTML for <body> Section

<div class="multicol">
			<h1>Multi-column Layout Example</h1>
			<figure>
				<img src="https://foxinfotech.org/wp-content/uploads/2019/03/get-a-blog.jpg" alt="fox infotech" />
				<figcaption>Image by Fox Infotech</figcaption>
			</figure>
			<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
			<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
			<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
		</div>

Output

Multi-column Layout Example

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Complete HTML Example

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSS Multi-Column Layout</title>
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
        }
        
        .multicol {
            position: relative;
            margin: auto;
            max-width: 960px;
            -webkit-columns: 4 12em;
            columns: 4 12em;
            -webkit-column-gap: 2em;
            column-gap: 2em;
            -webkit-column-rule: 1px solid red;
            column-rule: 1px solid red;
        }
        
        .multicol p {
            padding: 0.25em;
        }
        
        .multicol figure {
            margin: 0;
            padding: 0;
            width: 100%;
        }
        
        .multicol figcaption {
            color: #999;
            font-size: 0.7em;
        }
        
        .multicol img {
            width: 100%;
        }
        
        .multicol h1 {
            -webkit-column-span: all;
            column-span: all;
            margin: 0.25em 0;
            padding: 0;
            text-transform: uppercase;
            font-size: 2em;
        }
        
        .multicol h2 {
            margin: 0.25em 0;
            padding: 0;
            text-transform: uppercase;
            font-weight: normal;
            font-size: 1.2em;
        }
    </style>
</head>

<body>
    <div class="multicol">
        <h1>Multicolumn Layout Example</h1>
        <figure>
            <img src="https://foxinfotech.org/wp-content/uploads/2019/03/get-a-blog.jpg" alt="fox infotech" />
            <figcaption>Image by Fox Infotech</figcaption>
        </figure>
        <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
        <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
        <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
    </div>
</body>

</html>

HTML/CSS Example of Multi-Column Layout (4 Columns)

CSS Multi-Column (4 Columns) Layout

HTML for <body> Section

Output

Multi-column Layout Example

Complete HTML Example

Our Sites

License