CSS columns

The CSS columns property allows you to create a multi-column layout for text content. This can help make your text more readable, especially on larger screens.

To use the columns property, you can set the number of columns you want and also specify the column gap. Here's an example:

Result:


    <div style="columns: 3; column-gap: 20px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Vestibulum sodales mi vitae rutrum. Integer euismod turpis ut elit volutpat.</p>
      <p>Nullam tellus velit, volutpat sit amet malesuada sit amet, imperdiet et elit.</p>
      <p>Fusce vel euismod mauris. Cras facilisis sollicitudin justo, a bibendum mi pharetra et.</p>
    </div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vestibulum sodales mi vitae rutrum. Integer euismod turpis ut elit volutpat.

Nullam tellus velit, volutpat sit amet malesuada sit amet, imperdiet et elit.

Fusce vel euismod mauris. Cras facilisis sollicitudin justo, a bibendum mi pharetra et.

In this example, we have set the number of columns to 3 and the column gap to 20px. The text content is automatically split into three columns with a gap between each column.

You can also use the columns property to create a responsive layout. For example, you can use percentages for the column width instead of fixed values. Here's an example:

Result:


    <div style="columns: 30% 3; column-gap: 10%;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Vestibulum sodales mi vitae rutrum. Integer euismod turpis ut elit volutpat.</p>
      <p>Nullam tellus velit, volutpat sit amet malesuada sit amet, imperdiet et elit.</p>
      <p>Fusce vel euismod mauris. Cras facilisis sollicitudin justo, a bibendum mi pharetra et.</p>
    </div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vestibulum sodales mi vitae rutrum. Integer euismod turpis ut elit volutpat.

Nullam tellus velit, volutpat sit amet malesuada sit amet, imperdiet et elit.

Fusce vel euismod mauris. Cras facilisis sollicitudin justo, a bibendum mi pharetra et.

In this example, we are using percentages for the column width (30%) and column gap (10%). This allows the columns to adjust their width based on the size of the container.