CSS Layout #1 - Multiple columns layout

This is the first episode as the workshop summary from Webconf Asia 2018. Being through Blueprint CSS, Twitter Bootstrap and a few other frameworks, what're the modern ways of building flexible, responsive and friendly web page layout?

CSS3's multiple columns is one of the easiest approaches. It's easy to have a pinterest-like waterfall layout with multiple columns. In the example below, given the column-width, the width of each column is fixed unless the container is even narrower. Browser then fills at many columns as possible up to column-count.

.card {
  border: 1px solid #000;
  margin: 0 0 1em 0;
  page-break-inside: avoid; /* avoid cross column cards */
  break-inside: avoid; /* avoid cross column cards */
}

img {
  max-width: 100%;
  display: block;
  margin: 0 0 1em 0;
}

.inner {
  padding: 0 10px;
}

.content {
  column-width: 300px; /* suggested width of columns */
  column-count: 4; /* max # of columns */
  column-gap: 25px;
}
Hot air balloons

Lunardy went up alone, with the exception of the pigeon, the cat, and the dog, that were with him.

Hot air balloons

Lunardy went up alone, with the exception of the pigeon, the cat, and the dog, that were with him.

Hot air balloons

Lunardy went up alone, with the exception of the pigeon, the cat, and the dog, that were with him.

Hot air balloons

Lunardy went up alone, with the exception of the pigeon, the cat, and the dog, that were with him.

Hot air balloons

Lunardy went up alone, with the exception of the pigeon, the cat, and the dog, that were with him.

Hot air balloons

Lunardy went up alone, with the exception of the pigeon, the cat, and the dog, that were with him.

Lunardy went up alone, with the exception of the pigeon, the cat, and the dog, that were with him.

Hot air balloons

Lunardy went up alone, with the exception of the pigeon, the cat, and the dog, that were with him.

Hot air balloons

Lunardy went up alone, with the exception of the pigeon, the cat, and the dog, that were with him.