Multi-column

Multi-column layout splits content into columns, like a newspaper. It is the third CSS layout system alongside flex and grid.

columns: shorthand for column-count and column-width. With a width, it creates as many columns as fit.
column-gap: space between columns.
column-rule: dividing line between columns, with the same syntax as border.
column-span: all: makes an element, such as a heading, span every column.
break-inside: avoid: stops an element from being split between two columns.

Example

Change columns on the container. A number sets how many columns there are; a width such as 10rem lets the browser create as many as fit. Try that last option while moving the width control.

Select columns:

12310rem

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  column-gap: 1rem;
  column-rule: 1px solid #a9cdf6;
  columns: 2;
  padding: 0.5rem;
}

.child {
  break-inside: avoid;
  margin-bottom: 0.75rem;
  padding: 1rem;
}

.child:nth-child(3n) {
  padding-block: 2rem;
}

.container {
  border: 1px solid #2b7de0;
  column-gap: 1rem;
  column-rule: 1px solid #a9cdf6;
  columns: 2;
  padding: 0.5rem;
}

.child {
  break-inside: avoid;
  margin-bottom: 0.75rem;
  padding: 1rem;
}

.child:nth-child(3n) {
  padding-block: 2rem;
}

Edit the code or use the selectors: the result updates instantly.