How can we do a table like display with CSS grid?

CSS grid makes it very flexible to show table like formatting of divs like so:

<html>
<head>
<link rel="stylesheet" href="TABLE.css">
</head>
<body class="TABLEcontainer">
   <div class="TABLEheader">This is the heading.</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
   <div>100</div><div>Fred</div>
</body>
</html>

and

.TABLEcontainer{
   display : grid;
   grid-auto-rows: 2em;
   grid-template-columns: 1fr 1fr;
}

.TABLEheader{
   grid-column-start: 1;
   grid-column-end: 3;
}

.TABLErow{
   grid-column-start: 1;
   grid-column-end: 3;
}

.TABLEcontainer * {
   text-align: center;
}

 /* put red debug lines in */
 * {outline: 1px red solid; }