CSS Multiple Columns

Column Properties

column-count sets the number of columns.

column-width sets the optimal column width.

column-gap controls space between columns.

column-rule adds borders between columns.

break-inside controls breaking within elements.

/* Basic columns */
.text {
  column-count: 3;
  column-gap: 40px;
}

/* Responsive columns */
.responsive {
  column-width: 250px;
  column-gap: 30px;
}

/* Column rule (divider) */
.divided {
  column-count: 2;
  column-gap: 50px;
  column-rule: 2px solid #ddd;
}

/* Prevent breaking */
.card {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Span across columns */
h2 {
  column-span: all;
}