A Little Context
I'm certainly not an expert web developer/designer, so I get excited when I discover tools that make my life easier. At...
For further actions, you may consider blocking this person and/or reporting abuse
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...
Good work, Grant! Do you have a link to this project online to see it in action? :)
Thanks, Thomas! You can check out a sample of it at (sorry, link died) (there's still some work to do for the project, but this is more or less the foundation of it). This is a "right hand, middle row" exercise.
nice post! Grid is amazing