This post is the second in a new Scotch series called Code Challenge. We haven’t done one of these since April 23, 2015 but we’d love to start them up more often.
Every week we will post an image or tiny app that you can try to build yourselves!
We encourage you to use CodePen to build out your own solutions. It’s a fun and easy to use online coding playground. Be sure to post your solution in the comments along with what you learned!
The Challenge
CSS Grid is a relatively new tool that we can use to layout our applications. CSS grid is incredibly useful at laying elements out in a… you guessed it, a grid! I recently made this calculator as prep for an upcoming Vue course. The CSS grid helped layout all the buttons quickly and easily.
This calculator was easy to layout thanks to CSS grid and could be achieved in as little as 10 lines of code. You’ll need more to style out the calculator itself but the grid part is achieved succinctly.
Build this calculator using CSS Grid.
- Try to keep your code as simple as possible. CSS grid let’s us create layouts with very few lines of code
- Notice the larger clear and 0 buttons
Useful Resources
Here are some resources to get you some more info about CSS grid:
Join the Community
We’ve opened up a new Slack channel in the Scotch Slack that you can join and discuss solutions on. Once you’re in the Slack group, join the #codechallenge channel.
The Solution
Solution will be posted here Monday.
Post your own CodePens in the comments! Happy coding!