Flexbox works. Can also do this with fairly straightforward html/css, which I am a fan of.
Make a div with class=“bigBox” or something like that. Make within that div 9 (3x3=9) divs with class=“smallBox”
In css, define the height/width of bigBox by a set number of pixels. Also, set its display: inline-block (or, though I’m less well versed in flex, display: flex might also work for this purpose).
Then, define the height/width of the class smallBox as 33%. (You may also need to define position: relative) Since all those divs with class smallBox are children of bigBox, their height and width will be defined as a percentage of the number of pixels you used to define bigBox. Further, they will inherit the display property of their mama, bigBox, as inline-block. The first three smallBox divs will nicely fill up one row of bigBox. There won’t be room for the fourth smallBox on that line, so they will begin filling a second row, and so on until you have your 3x3 grid.
To make the center div blank, well, just don’t put anything into it. Also-- keep in mind that margins/padding/borders might mess with this. i.e. a 1% margin makes the total width of the smallBox div 34%, and 34x3===102, which then means only 2 divs per row.
Anyway, there’s some fairly basic html/css that solves the issue. That always seems better to me than introducing an outside resource like bootstrap, which I feel gets really ugly.