Learning CSS Anchor Positioning with Anchoreum
Way back when, vertically centering an element was a tall task. Setting consistent gaps between elements took some thinking and several lines of code. Then came flexbox and grid. Both were new and, at the time, magical features of CSS. Those were the times in which I released Flexbox Froggy and Grid Garden.
Like its predecessors, Anchoreum is free to play with no registration required at anchoreum.com. Take a quick dive or refresher whenever you feel motivated.
You can also play Anchoreum for free on Codepip. This is my platform of 19 coding games that touch on topics like CSS selectors, JavaScript array methods, regular expressions, and SQL. Register a free account there to save your progress and get access to 10 bonus levels.
In Anchoreum, you use CSS anchor positioning to help a museum set up its new exhibit by affixing labels to each anchor display. It’s inspired in part by this nifty anchor tool from Una Kravets.
The best way to answer to this is to play Anchoreum. But in a nutshell, CSS anchor positioning is a new layout module that let’s you position and size one element relative to another. There are also options to set fallback behaviors when the element is scrolled off the page. You can tether one element to another, useful for building components like tooltips, dialogs, and dropdown menus.
