re: A Keyboard Display using CSS Grid VIEW POST

FULL DISCUSSION
 

Too bad grid doesn't support non-rectangular areas 😝
You could've made a classic L-shaped enter key.

Anyway, that keyboard layout can be done in flex, but you have to create vertically oriented sub-containers, making everything a little complicated. Grid is so nice!

 

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.

 

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: plnkr.co/edit/aCcc87hAakSaPYwQhO7S...

code of conduct - report abuse