css - CSS multiple columns

1. Basic Properties

CSS provides a set of properties for multi-column layouts:

1. column-count – How many columns you want.

2. column-width – Desired width of each column. Browser decides how many columns fit if both are used.

3. column-gap – Space between columns.

4. column-rule – A vertical line between columns (like a border).

2. Example

HTML

<div class="multi-column">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
  </p>
</div>

CSS

.multi-column {
  column-count: 3;        /* 3 columns */
  column-gap: 20px;       /* space between columns */
  column-rule: 1px solid #333; /* vertical line between columns */
}

✅ Explanation:

• column-count: 3; → splits content into 3 columns.

• column-gap: 20px; → gives 20px space between columns.

• column-rule: 1px solid #333; → adds a thin vertical line between columns.

3. Using column-width instead of column-count

.multi-column {
  column-width: 200px;   /* each column ~200px wide */
  column-gap: 15px;
}

Here, the browser automatically decides how many columns fit based on the container width and desired column width.

4. Combining Both

.multi-column {
  column-count: 3;
  column-width: 150px;
  column-gap: 15px;
  column-rule: 1px dashed #555;
}

• Browser will try 3 columns of at least 150px each.

• If the container is too narrow, it may reduce the number of columns.

Key Notes:

• Multi-column layouts work best for text-heavy content.

• Not suitable for complex nested HTML structures, like cards or images.

• You can control breaks using break-inside: avoid; on child elements to prevent awkward splits.