Alternating columns (3-2) using CSS grid and nth-child formulas
Published: July 9, 2020By Sebastian
If your layout has lots of rows, and you want to alternate between 3 and 2 columns on odd and even rows, you can save time using :nth-child formulas.
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
Alternating columns (3-2) using CSS grid and nth-child formulas
If your layout has lots of rows, and you want to alternate between 3 and 2 columns on odd and even rows, you can save time using :nth-child formulas.
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