I was not aware of this grid style at all. But after some reading up on it, it seems that it is pretty easy to mimic a HTML <table> with a HTML <div> element defined as container, and replace the <td> elements in it by <div> elements. The <tr> level can be omitted entirely, as the length of each table row is implied by the container <div> through its columns template. This is good, because it means there would hardly have to be any change in the current code to use a grid instead of a table. The <td> attribute colspan (which the I.D. only uses for the upper board rim) has an analog in the grid as well.

In detail: the board table currently is defined as

<table id="board' + dnr + '"
       cellpadding="0"
       style="
              border-collapse:collapse'
              + (background ? ';background-image:url(' + background + ')' : '') + '
             "'
       + (coords < 0 ? ' border="1"' : '') +'
       oncontextmenu="return false;"
   ></table>                               // initially empty

The cellpadding seems to become redundant, as the <div> daughters by default would have zero padding, unlike the <td> granddaughters. I have no doubt that a <div> would also support oncontextmenu and a background-image. That leaves the border-collapse style; I suppose the corresponding grid attribute is the column-gap. I am not sure whether setting that to 0 and giving the <div> daughters a border of 1px would make the borders coincide, or whether this would require column-gap to be 1 or -1.

In addition the container would need the style display:grid. The width and height attributes of the <td> elements would be moved to the container <div> as grid-template-columns and grid-template-rows. Cells for the board rim contain (apart from the now redundant height and width styles) only styles for their background and text coloring and alignment.(And in one case a colspan="N", which would become a column-start: 1/span N style.)

It looks like a simple patch; I will try it out.

The <td> elements for the board squares are currently defined with attributes

valign="center"
align="center"
style="
     width:' + sqrSize + 'px;
     height:' + sqrSize + 'px' + ';
     border:' + bb + ';                     // bb = (borders ? 'thin solid black' : 'none');
     font-size:xx-large;
     background-repeat:no-repeat;
     background-position: center center;
     background-size:contain
     "
onmousedown="Down(' + bnr + ',' + j + ',' + h + ',event)"
onmouseup="Up(' + bnr + ',' + j + ',' + h + ',event)"
ontouch="Touch(' + bnr + ',' + j + ',' + h + ')"
onmouseover="Hover(event)"
ondragover="PreDrop(event)"
ondrop="Drop(event)"
ondragend="Relay(event)"

All the handlers would no doubt also work on a <div> element. I am not sure the align and valign HTML attributes would work on a <div>; they might have to be replaced by corresponding style specs. (These serve to position the move-highlighting marker images, which are cell content.) As for the styles, I think border works fine on a <div>, as well as font-size (needed only to display question marks in move diagrams to indicate hidden hopper moves when color highlighting is used). The background details should work too, as <div> elements can have background images. (The actual background-image (of the piece) would be set by Display().) So it is basically a matter of replacing the width and height styles (now handled by the container templates) by style instructions needed to center the content.