Adding buttons around a table in Blazor

Question

So essentially, I am programming a rubiks cube solver where I am using blazor to display the 2D face- I want to add buttons north, east, south and west of the 2D face which are labelled "see left", "see right", "see up" and "see down" which shows the corresponding face. Problem is I have no idea how to position the buttons so they are inline with the middle row of each face? Ive attached my current code (I havent implemented any buttons quite yet) which displays the 2D table- Ive also attached a photo on what i idelaly want it to look like:

<div style="width: 200px;">
    <table class="table table-bordered">
        <tbody>
            @for (var r = 0; r < 3; r++)
            {
                <tr>
                    @for (int c = 0; c < 3; c++)
                    {
                        <td class="align-middle text-center" style="background-color: @face[r, c]; color: white">@face[r, c]</td>
                    }
                </tr>
            }
        </tbody>
    </table>
</div>

Picture of what I would like it to look like (arrows are not necessary!)

I tried to do make a bigger table and put the 2D table in it and add the buttons around it but it didn't work :( Im quite a new programmer and HTML is not my strong point- I appreciate any help!

Answer 1

RubikButtons.razor

<div class="rubiks-container">
    <button class="button-up">⬆️ See up</button>
    <button class="button-down">⬇️ See down</button>
    <button class="button-left">⬅️ See left</button>
    <button class="button-right">➡️ See right</button>
    <div class="rubiks-content">
        @ChildContent
    </div>
</div>
@code {
    [Parameter, EditorRequired]
    public RenderFragment ChildContent { get; set; } = default!;
}

RubikButtons.razor.css

button {
    width: fit-content;
}

.button-up {
    background-color: aliceblue;
    grid-area: button-up;
    justify-self: center;
}

.button-down {
    grid-area: button-down;
    justify-self: center;
}

.button-left {
    grid-area: button-left;
    justify-self: end;
}

.button-right {
    grid-area: button-right;
}

.rubiks-container {
    display: grid;
    grid-template:
        'button-up button-up button-up'
        'button-left rubiks-content button-right'
        'button-down button-down button-down';
    grid-gap: 10px;
}

Usage

<RubikButtons>
    <div>SomeCubeDisplay</div>
</RubikButtons>