Ridiculously easy.
(Leading and trailing triple backticks to make the code below viewable at TalkTiddlyWiki)
<style>
.bu {width:3em;height:3em;background:white;border:2px dotted lightgray;margin-right:-6px;font-weight:bold;}
.bu:hover {border:2px solid black;}}
</style>
<$checkbox field="grid" checked="yes" unchecked="no" default="yes"> Show Grid</$checkbox>
<$list variable="r" filter="[range[1],[8]]">
<$list variable="c" filter="[range[1],[8]]">
<$let cell={{{ [[cell]addsuffix[.]addsuffix<r>addsuffix[.]addsuffix<c>] }}}
cell_val={{{ [<currentTiddler>get<cell>else[.]] }}}>
<$button
class="bu"
style={{{ [<cell_val>match[X]then[background:gray;]else[color:white;]] [<currentTiddler>get[grid]else[yes]match[no]then[border:none;]] +[join[]] }}}>
<$action-setfield
$field=<<cell>>
$value={{{ [<cell_val>match[.]then[X]else[.]] }}}/>
<<cell_val>>
</$button>
</$let>
</$list>
<br>
</$list>