CSS Multi Column Layout

Multi-column layout is a powerful technique in CSS that allows you to break down your website content into vertical columns, similar to a newspaper or magazine. This can be a great way to improve readability, especially on wider screens, and create a visually appealing layout for text-heavy pages.

Here's what you need to know about multi-column layout in CSS

column-count: This property defines the number of columns you want to create. For example, column-count: 2; would create two columns.
column-width: This property defines the width of each column. You can specify absolute values (e.g., 50px)
column-gap: This property defines the spacing between the columns.
column-rule: This property controls the appearance of a rule (line) between the columns. You can set its style, color, and width.

HTML Code

<!--CSS Multi column Layout-->
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="test.css">
  </head>
  <body>
      <div>
          <h1>Welcome to my Research Article</h1>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quibusdam voluptates recusandae numquam eius atque totam. Reprehenderit voluptatem, maiores blanditiis libero quia deserunt dicta modi soluta! Ad veniam ea perferendis?        <img src="images/caption.JPG" id="img1" alt="its a table">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt ab adipisci eos saepe! Dolore quaerat iusto inventore sit quas eum, repudiandae, voluptatem sint officiis, debitis obcaecati voluptate! Repudiandae, nihil minus?
          <img src="images/caption.JPG" id="img2" alt="its a table"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero et obcaecati cum sapiente eaque magnam accusantium debitis inventore veniam minus unde, consequatur voluptatibus voluptate possimus eos dolorem magni, corrupti suscipit.
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque blanditiis excepturi perspiciatis. Quaerat natus, modi ex ad eaque unde accusantium asperiores sequi sint ab et libero in pariatur corporis. Veritatis.
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas esse aliquam alias molestiae, commodi perspiciatis? Est vero dolore inventore! Nemo quia et veniam quo nulla laudantium corrupti ab, voluptatem cumque.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, ipsam aut! Eos exercitationem nisi doloremque quia molestiae maxime fugiat. Voluptatem vel blanditiis tempore dolorem nesciunt architecto iure, autem ab at.
      </div>
  </body>
  </html>

CSS File

div
  {
      column-count: 3;
      column-rule: 2px solid blue;
      column-gap: 20px;
      text-align: justify;
      background-color:antiquewhite;
  }
  
  h1
  {
      column-span: all;
      background-color: aqua;
      text-align: center;
  }
  
  #img1
  {
      float:left;
      margin:5px;
  }
  
  #img2
  {
      float:right;
      margin:10px;
  }

Output

image of a webpage showing use of multicolumn layout in CSS