Square grid of spans in CSS?

As I said in all my posts, I’m trying to finish all of the Free Code Camp challenges. One of the advanced Frond End Development challenges is to make a functional JavaScript calculator.

Now the code in JavaScript looks out to be long and tedious, and figuring how to do the calculations and concatenating the different operations to obtain a result. But it took me a few hours to figure out how to get the layout to look like an actual calculator.

So, the way I managed to figure this out was with the <span> element.


<div id=”calculator”>
<div class=”screen” id=”screen”>
<div class=”numbers”>
<span id=”clear”>AC</span>
<span id=”modulus”>%</span>
<span id=”divided”>÷</span>
<span id=”7">7</span>
<span id=”8">8</span>
<span id=”9">9</span>
<span id=”plus”>+</span>
<span id=”4">4</span>
<span id=”5">5</span>
<span id=”6">6</span>
<span id=”minus”>-</span>
<span id=”1">1</span>
<span id=”2">2</span>
<span id=”3">3</span>
<span id=”times”>×</span>
<span id=”point”>.</span>
<span id=”0">0</span>
<span id=”ans”>Ans</span>
<span id=”equals”>=</span>

This looks bad, I know. There are probably some workarounds to avoid having a different ID for each span element, but that is not the point of the post. The point is how do you get the calculator look?

Well, turns out you first have to lock the calculator’s body like this:

#calculator {
width: 350px;
height: auto;
margin: 100px auto;
padding: 40px;
background-color: gray;
border-radius: 5px;

First you have to make the overflow property hidden, so the numbers stay within the calculator’s container. Then you make the spans float left, give them a set height and width and some margin so they pile up as separate squares inside the calculator width.

.numbers {
overflow: hidden;
.numbers span {
float: left;
width: 60px;
height: 40px;
margin: 0 7px 11px 0;
text-align: center;
line-height: 40px;

Here’s the rest of it, with some background colors. Hopefully it will be a finished project soon:

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.