In the code below the .rows are not placed in the center despite placed in a .wrapper {display:flex; align-items:center; justify-content:center}. Also, the third row is not wrapping to the next line. The gap:20px; is not working either. I am trying to make a centered 2column 2row layout for the first 4 images and 1 row for 1ast image.
.wrapper { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%;}.row { display: flex; flex-direction: row; flex-wrap: wrap; width: 940px; gap: 20px;}.column { flex-direction: column; flex-basis: 100%; flex: 1; gap: 20px;}<div class="wrapper"><div class="row"><div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/26a76fb4-c0c9-1296-36dd-a0adcfd0da11.jpg" width="452px" height="300px"></div><div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/2bdc1eb0-300a-9f18-273a-1939c3a1a20a.jpg" width="452px" height="300px"></div></div><div class="row"><div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/db72e41d-c338-08d3-d0ee-782dd31791d6.jpg" width="452px" height="300px"></div><div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/74b818c5-f67c-540f-c724-b6a71fcad0db.jpg" width="452px" height="300px"></div></div><div class="row"><div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/ce6173d9-ed33-0d23-bed7-ce1fa03db6b6.jpg" width="923px" height="518px"></div></div></div>