Menu
For a FreeCodeCamp assignment I am making an iOS Calculator clone in CSS Grid Layout. The JavaScript to run it is work for later; I'm now focusing on a the design.
The final 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 did:
I have made a general grid with several nested grids. No.3 of these nested grids has to hold the calculator keys (digits 0-9, basic math operations, result, clear).
How do I set a continuous background-color across a certain number of cells e.g. darker grey, orange etc.?
Now, setting the bg on my individual divs is leaving gaps.
Next, the cell-borders should also get a 1px solid color, as per the example.
Having searched around on SO and in CSS Grid layout / CSS Flexbox tutorials, I could not find a simple solution to this obviously simple task. Should I bring Flexbox into my Grid here?
As much as I appreciate the wonderful new dynamics Grid brings, and its compatibility with Flexbox, I am still very much new to both.
Any tips and remarks on my code structure are welcome! Thanks, Chris
795
There is a workaround way: use pseudo :after or :before in each column to apply background color to grid gap.
To place an item, you can refer to line numbers, or use the keyword "span" to define how many columns the item will span.
You can "nest" grids by making a grid item a grid container. These grids however are independent of the parent grid and of each other, meaning that they do not take their track sizing from the parent grid. This makes it difficult to line nested grid items up with the main grid.
To fix the borders and background of nested-3, you could set the background and borders using:
background: #888;
grid-gap: 1px;
and for all the children of nested-3 you could set background:
.nested-3 > div {
background: #ddd;
}
Instead of padding on .operations you could add this to nested-3 > div:
.nested-3 > div {/* ADDED */
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
padding: 1.3rem;
}
and you might have to remove justify-items: center and padding: 1rem from the nested-3 div.
I tried out the design too - rearranged the markup like so:
<div class="nested-3 keys">
<!-- MODIFIED HERE -->
<div class="operations bg-grey">C</div>
<div class="operations bg-grey">+/-</div>
<div class="operations bg-grey">%</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div class="zero">0</div>
<div>.</div>
<div class="operations bg-grey op-right">/</div>
<div class="op-right">x</div>
<div class="op-right">-</div>
<div class="op-right">+</div>
<div class="op-right">=</div>
</div>
and added these styles:
.nested-3>.op-right {
grid-column-start: 4;
grid-row-start: 1;
background: #fd8a0d;
}
.nested-3>.op-right+.op-right {
grid-row-start: 2;
}
.nested-3>.op-right+.op-right+.op-right {
grid-row-start: 3;
}
.nested-3>.op-right+.op-right+.op-right+.op-right {
grid-row-start: 4;
}
.nested-3>.op-right+.op-right+.op-right+.op-right+.op-right {
grid-row-start: 5;
}
.zero {
grid-column: span 2;
}
See the snippet below:
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: #888;/* CHANGED */
grid-gap: 1px;/* ADDED */
font-family: "Roboto", sans-serif;
font-weight: lighter;
/*padding: 1rem;*/
}
.nested-3>div { /* ADDED */
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
padding: 1.3rem;
}
.operations {
font-size: 1.5rem;
/*padding: 1.3rem;*/
}
.bg-grey {
background: #ccc;
}
.left-cell {
background: black;
}
.right-cell {
background: black;
}
.calculator {
background: #333333;
}
/* ADDED THESE BELOW */
.nested-3>.op-right {
grid-column-start: 4;
grid-row-start: 1;
background: #fd8a0d;
}
.nested-3>.op-right+.op-right {
grid-row-start: 2;
}
.nested-3>.op-right+.op-right+.op-right {
grid-row-start: 3;
}
.nested-3>.op-right+.op-right+.op-right+.op-right {
grid-row-start: 4;
}
.nested-3>.op-right+.op-right+.op-right+.op-right+.op-right {
grid-row-start: 5;
}
.zero {
grid-column: span 2;
}<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">
<!-- MODIFIED HERE -->
<div class="operations bg-grey">C</div>
<div class="operations bg-grey">+/-</div>
<div class="operations bg-grey">%</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div class="zero">0</div>
<div>.</div>
<div class="operations bg-grey op-right">/</div>
<div class="op-right">x</div>
<div class="op-right">-</div>
<div class="op-right">+</div>
<div class="op-right">=</div>
</div>
</div>
<div class="right-cell">
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
