Css

<style>
    .parent{
        height: 400px;
        width: 400px;
        background-color: rgb(176, 135, 214);
        position: relative;
        display: inline-block;
        margin: 5px;
    }
    .child1{
        height: 170px;
        width: 170px;
        background-color: rgb(164, 40, 40);
        top:10px;
        left:10px;
        position: absolute;
    }
    .child2{
        height: 170px;
        width: 170px;
        background-color: rgb(164, 40, 40);
        top:10px;
        right:10px;
        position: absolute;
    }
    .child3{
        height: 170px;
        width: 170px;
        background-color: rgb(164, 40, 40);
        bottom:10px;
        left:10px;
        position: absolute;
    }
    .child4{
        height: 170px;
        width: 170px;
        background-color: rgb(164, 40, 40);
        bottom:10px;
        right:10px;
        position: absolute;
    }
    .container{
        width: fit-content;
        margin: auto;
    }
    .parent-container{
        width: 100%;

    }
</style>
<div class="parent-container">
    <div class="container">
        <div class="parent">
            <div class="child1"></div>
            <div class="child2"></div>
            <div class="child3"></div>
            <div class="child4"></div>
        </div>
        <div class="parent">
            <div class="child1"></div>
            <div class="child2"></div>
            <div class="child3"></div>
            <div class="child4"></div>
        </div>
        <div class="parent">
            <div class="child1"></div>
            <div class="child2"></div>
            <div class="child3"></div>
            <div class="child4"></div>
        </div>
    </div>
</div>