Alternating columns (3-2) using CSS grid and nth-child formulas

If your layout has lots of rows, and you want to alternative between 3 and 2 columns on odd and even rows, you can save time using :nth-child formulas.

See the Pen Alternating columns per row (3-2) using CSS grid by Sebastian (@SebastianWebb) on CodePen.

The above technique works by setting every 4th and 5th item to fill half of the grid (instead of a 3rd) using :nth-child(5n-1) and :nth-child(5n) formulas.

See how to do this with Microthemer

Alternating columns (3-2) using CSS grid and nth-child
Close
NEW - style option sliders