CSS Columns

Create responsive multi-column text layouts automatically.

.article {
  columns: 3 300px;
  column-gap: 2rem;
  column-rule: 1px solid #ddd;
}

The browser creates up to 3 columns, each at least 300px wide - no media queries needed.

Live Demo

.columns-demo {
columns: 2 150px;
column-gap: 1.25rem;
column-rule: 1px solid rgba(139, 92, 246, 0.4);
font-size: 0.85rem;
line-height: 1.6;
}
.columns-demo p {
margin: 0 0 0.5rem 0;
}

Use break-inside: avoid on elements you don’t want split across columns.