flexgrid.css

:root {
    --flex-gap: 1rem; /* Variable for gap */
}

.flexbox {
    display: flex;
    flex-wrap: wrap;
    gap: var(--flex-gap);
    justify-content: center;
    padding: var(--flex-gap); /* We use padding to give space between the edge of the flexbox and flex items */
}

.flex-items {
    --flex-items: 1; /* Number of flex items*/
    align-items: flex-end;
    aspect-ratio: 3 / 4;
    display: flex;
    justify-content: center;
    width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
}

.flex-title {
    background-color: rgba(0, 0, 0, .5);
    color: #ffffff;
    padding: .5rem;
    text-align: center;
    width: 100%;
}