GridLesson 315Free preview

Column Cards

This lesson is part of How To · All levels

Summary

Column cards are content cards arranged in several vertical columns, similar to a magazine layout. Multi-column CSS (column-count or columns) can automatically stream the card to the next column. For the cards that must not be cut, use break-inside: avoid and distance with column-gap.

Key points

The column-count specifies the number of columns, whereas the columns can set the number and width at once.
Break-inside: avoid preventing the card from splitting between columns
Column-gap setting the distance between columns
The cards with different heights will flow to fill the column
On a small screen, reduce the number of columns or use one column

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.