To assign FreeCodeCamp, I am cloning an iOS calculator in a CSS Grid layout. JavaScript to run is work for later; Now I'm focused on design.
The end result should look something like this:
html { font-size: 20px; } .wrapper { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; grid-auto-rows: minmax(700px, auto); } .wrapper>div { padding: 0; } .nested-1 { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; } .nested-1>div { font-family: "Roboto", sans-serif; font-size: 0.6rem; color: white; } .top-bar { padding-top: 0.3rem; } .flight-modus { justify-self: start; padding-left: 0.3rem; } .charge-status { justify-self: end; padding-right: 0.3rem; } .nested-2 { display: grid; grid-auto-rows: minmax(200px, auto); justify-items: end; } .nested-2>div { font-family: "Roboto", sans-serif; font-size: 5rem; font-weight: lighter; color: white; padding-left: 0.2rem; padding-right: 0.2rem; align-self: end; } .nested-3 { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); justify-items: center; font-size: 2.2rem; color: black; background: #ddd; font-family: "Roboto", sans-serif; font-weight: lighter; padding: 1rem; } .operations { font-size: 1.5rem; padding: 1.3rem; } .bg-grey { background: #ccc; } .left-cell { background: black; } .right-cell { background: black; } .calculator { background: #333333; }
<body class=""> <div class="wrapper"> <div class="left-cell"> </div> <div class="calculator"> <div class="nested-1 top-bar"> <div class="flight-modus"><img src="http://i63.tinypic.com/sebv9j.png" alt="flight mode"> <img src="http://i67.tinypic.com/5zqf4k.png" alt="wifi signal at full strength"></div> <div>10:10 am</div> <div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" alt="battery at near full charge"></div> </div> <div class="nested-2 result"> <div>3,658.8</div> </div> <div class="nested-3 keys"> <div class="operations bg-grey">C</div> <div class="operations bg-grey">+/-</div> <div class="operations bg-grey">%</div> <div class="operations bg-grey">/</div> <div>5</div> <div>5</div> <div>5</div> <div>5</div> <div>5</div> <div>5</div> <div>5</div> <div>5</div> <div>5</div> <div>5</div> <div>5</div> <div>5</div> <div>5</div> <div>5</div> <div>5</div> <div>5</div> </div> </div> <div class="right-cell"> </div> </div>
What I've done:
I created a shared grid with several nested grids. No. 3 of these nested grids should hold the keys of the calculator (numbers 0-9, basic mathematical operations, the result, clearly).
How to set continuous background-color for a certain number of cells , for example. dark gray, orange, etc.? Now installing bg on my individual divs leaves spaces. Further, cell-borders should also get a solid 1px color, as shown in the example.
Looking through SO and CSS Grid layout / CSS Flexbox tutorials, I couldn’t find a simple solution to this obviously simple task. Should I bring Flexbox to my grid here?
As much as I appreciate the wonderful new dynamics that Grid brings, and its compatibility with Flexbox, I'm still very new to both.
Any tips or comments on my code structure are welcome! Thank you, Chris
source share