HTML and CSS: creating an online game's board - Layout [closed]

Question

I am creating a basic web-based game using Vanilla JavaScript, HTML, and CSS. I have coded a grid using flex and a basic table. The code is long and ugly. Is there a simpler way to do this? or a more efficient way?

[JS Fiddle Example][1]

[1]: This is the JS fiddle link https://jsfiddle.net/CosmoCamus/4qgts08x/1/

Answer 1

You can do this easily by using flex. And customize it according to your use:

.grider {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    aspect-ratio: 1 / 1;
    border: 1px outset #999;
}

.grider > div {
    border: 1px inset #999;
    margin: 1px;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="grider">

    <div>top-left</div>
    <div>top-middle</div>
    <div>top-right</div>
    <div>middle-left</div>
    <div>center</div>
    <div>middle-right</div>
    <div>bottom-left</div>
    <div>bottom-middle</div>
    <div>bottom-right</div>

</div>