previous

page 4

next

Here's how we use class in our CSS style area.
Note the dot in front of the name - this tells CSS that this is a class name.

<style>
.row {
display:flex;
}
.cell {
height:13vmin;
border:thin solid;
}
</style>

Note also that I've added variable height so that our grid stays within the browser window irrespective of its size.

Next we add the score for the row. This is how I did it:

<div class='row'>
<img src='counters/0.png' class='cell'>
...
<div>0</div>
</div>
Because it's inside a flex box, all that is needed to centre it is one extra line,
align-items:center;:
.row {
display:flex;
align-items:center;
}
previous
next