/* Set number of columns */
.article {
  column-count: 3;
  /* Content flows across 3 columns */
}

/* Set column width */
.article {
  column-width: 300px;
  /* Creates as many 300px columns as fit */
}

/* Columns shorthand */
.article {
  columns: 3;        /* 3 columns */
  columns: 300px;    /* columns of 300px width */
  columns: 3 300px;  /* 3 columns, minimum 300px */
}

/* Gap between columns */
.article {
  columns: 3;
  column-gap: 30px;
  /* Space between columns */
}

/* Lines between columns */
.article {
  columns: 3;
  column-rule: 1px solid #ddd;
  /* Line between columns */
}

/* Full example */
.article {
  columns: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
  column-fill: balance;
  /* Balances content across columns */
}

/* Newspaper-style article */
article {
  columns: auto;
  column-width: 250px;
  column-gap: 30px;
  column-rule: 1px solid #e0e0e0;
}

/* Prevent breaks in headings */
h2 {
  break-inside: avoid;
  /* Keeps heading with following content */
}

/* Gallery in columns */
.gallery {
  columns: 3;
  column-gap: 20px;
}

.gallery img {
  width: 100%;
  margin-bottom: 20px;
}