Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Custom-Property Controlled Column Layout

Solution: Custom-Property Controlled Column Layout

Let’s use CSS custom properties to control column count and gutter spacing in a flexible, theme-ready layout.

We'll cover the following...

Problem description

A .container should display its children in a number of columns defined by CSS variables --cols and --gutter. By changing these variables, you must switch between 2, 3, or 4 columns ...