This is an ideal base for my own usage, which is replacing a button within the bottom grid of 9 <div> elements.

I would like to add an extra row to the grid with a single "cell" that spans across the whole screen. Is this possible? Do I need to create a new CSS class to handle this?

Unable to undestood, can you please elaborate or share some idea by an image?

You have a 3x3 grid. The rows are class=stats, and then 3x <div>'s inside those.

I am wondering if this can be altered so that on 1 row, there is 1 full-width <div> instead.

I am trying for a calculator-style amendment to your layout. The 3x3 grid is replaced with 9 buttons, for numbers 1-9. Beneath this, I would like an extra 4th row with a single, very wide button for "0" (actually I would use a word rather than the number).

Adding only a single <div> just puts it to the first of 3 in the grid with the current CSS.

Hope that explains a bit further...??

Assign a new custom class to that single div and in CSS, set width to 100%.

So HTML,

<div class="stats"> 
  <div class="letter-0">Letter 0 block</div>
</div>

And in CSS:

.stats div.letter-0{
  width: 100%;
}

You can achieve this by unordered list probably?