The Secret Twin Layout Strategy

Image of Author
September 26, 2022 (last updated July 20, 2023)

The Secret Twin Layout Strategy is a HTML and CSS trick that lets you achieve a desired, flexible layout strategy by creating duplicate elements (the 'twin' part) everywhere you want them to exist, and then hiding them (the 'secret' part) at certain screen widths. This allows the content to jump around the page as you resize.

You are not actually moving a single piece of content arbitrarily around the page (which you can almost do with CSS Grid), instead, you are giving off the illusion of doing so by hiding your identical twins all around the page, and revealing them at appropriate moments. Spoiler Alert for a 2006 film: This makes me think of the movie "The Prestige", which is where I got this (hopefully helpful) heuristic from.