See the Code - See it Full Page - See Details
A Flexbox grid that allows for 1, 2 and 3 column blocks. Some of the blocks only have text, others have a rollover that expands to 2 column widths. This was originally integrated with WordPress's ACF to allow the client to build their own blocks, but I've cleaned up the extra HTML/CSS as best as possible. The JS detects if the rollover object is touching the left side or right side, and pushes it to be twice the parent width and meet in the middle. This example has no media queries, but you can see how easily it would be to adapt to longer columns, or even full width columns
This Pen uses: HTML, CSS, JavaScript, and