There’s no reason you cant use both. Your wrapper div ‘basket’ is a grid parent element. The numbered div’s are grid children. The numbered children can also be flex parents (the text is the flex children or if you a put a h3 with the text inside, the h3).
This should work. (add center class to child elements)
.center {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
width: 300px;
background-color: red;
}
If you want the flex boxes to expand shrink and stack use grid to to achieve that.