How to create a 9 square boxes with 3 rows and 3 columns using css

Question

Accepted Answer

Below is the code to create 9 square boxes with 3 columns and 3 rows using css HTML:

Using CSS Grid:-


.parent {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;

    .box {
        border: solid 1px gainsboro;
    }
}

Using CSS Flexbox:


.parent {
    display: flex;
    flex-wrap: wrap;
    width: 300px;

    .box {
        flex-basis: 33.3%;
        height: 100px;
        border: solid 1px gainsboro;
        box-sizing: border-box;
    }
}