The goal is to create a CSS based key rendering and layout system, and the logical way to make it intuitive is to use as little markup as possible, this means using the :before and :after pseudo elements for keycap construction.
The difficult part is to render complex keys such as ISO Enter and "Big Ass" Enter keys, those have inset corners to them, and would require multiple elements stacked on top of each other plus adding corners to it.
Absolute positioning works very well to construct keys, except that it's way too complicated to keep track of. The goal is to create a CSS stylesheet that has the basic structure of the key, and then one can change the size and appearance easily, but this becomes too complicated for complex keys with too many calc() expressions.
The best part about using absolute position is that there is no pixel rounding problem causing complex key misalignment - it is pixel perfect.
Display grid works better, however it has three problems:
Define the regular keycap using grid, and then when creating complex keys use multiple nested keycaps and altered property to change key shape.
This yield the most intuitive method to create complex keys.
Problem - when resizing the browser, pixel rounding error will cause the corners of complex keys to be slightly misaligned at certain zoom levels however there are no seams showing. For the purpose of this tool it is deemed an acceptable issue since there's really no perfect solution.