DEV Community


Discussion on: A Keyboard Display using CSS Grid

gksander profile image
Grant Sander Author

I thought about hacking together an L-shaped enter key by essentially combining a horizontal key and a vertical key, but I figured it'd look sketchy and the borders wouldn't look like they should.

Interesting - that's good to know! I originally did the QWERTY in flex, but figured doing the number pad in flex would be way more work. So I ended up doing both in grid.

I really like how these kinds of layouts can be done with so little markup. All of the elements are direct children of the container, so the HTML side of things just looks/feels way cleaner.

edlb profile image
Etienne de la Broïse • Edited

Great test case for trying CSS grid!
Following your article I made a few tweeks to have the QWERTY international keyboard (with an L-shaped enter key).
You can see the result here: