Creating a 16x16(NxN) grid

Could go smaller, but here's a quick one:

let n=10;container.innerHTML=(d='<div class="')+'grd" style="width:'+n*14+'px">'+[...Array(n*n)].reduce((a,b,i)=>a+d+'cell">'+i.toString(16)+(e='</div>'),'')+e;
.grd { display: inline-block; font-size: 9.5px; text-align: center; color: red;}
.cell { display:inline-block; width: 10px; height: 10px; margin: 1px; border: 1px solid black;}
<div id="container"></div>


Red, 131 bytes

n: -1 view collect[loop 16[keep 'across
loop 16[keep compose[field 20x20 font-color red(to""to-hex/size n: n + 1 2)]]keep 'return]]

enter image description here

If the leading zeroes need to be discarded:

Red, 154 bytes

n: -1 view collect[loop 16[keep 'across
loop 16[s: to""to-hex/size n: n + 1 2 parse s[remove"0"]keep
compose[field 20x20 font-color red(s)]]keep 'return]]

enter image description here

Note: The first screenshot is taken on my Win 10 PC, the second one - on my Win 8.1 laptop, hence the difference.


PowerShell, 319 bytes

-1..15|%{If($_-lt0){$s="┌──";0..14|%{$s=$s+"┬──"};Write-Host "$s┐";}Else{$i=$_;0..15|%{Write-Host "│"-NoNewline;Write-Host ("{0:X2}"-f($i*16+$_))-f 12 -NoNewline;};Write-Host "│";$s=("├","└")[$_-eq15]+"──";0..14|%{$s=$s+(("┼","┴")[$i-eq15]+"──")};Write-Host("$s┤","$s┘")[$_-eq15]}}

Screenshot of the output:

enter image description here

Only my second PowerShell answer, so can definitely be golfed substantially.. Also, is it possible to create and use an Alias for the Write-Host?

Explanation:

TODO: Will add one later.

The X2 could be x2 to format the hexadecimal as lowercase letters.