Anordnung von sechs Bildern - gewünscht wäre jeweils 3 nebeneinander (oder jeweils zwei nebeneinander).

[karlakol]

Liebe Forumteilnehmer!
Bin leider nur Anfänger in CSS. Arbeite von einer anderen Person einen Schulauftrag nach: Auf einer HTML-Seite sind sechs Bilder:
Erste Reihe: Fünf Bilder nebeneinander
Zweite Reihe: Ein Bild und Links
Dritte Reihe: Links sollten da hin, die jetzt in Reihe 2 stehen.
Wunsch: Lieber jeweils 2 untereinander zentriert oder 3 und die LInks ganz darunter.

So schauts aus derzeit: HTML-Code: div-Tags bei dem jeweiligen Foto:

<div>
 <figure>
<img src="./images/8.jpg" alt="Beine männlich">
<figcaption>Beine männlich</figcaption>
</figure>
</div>

(Figure in der style.css:

figure {
        width: 250px;
    height: auto;
    float: right;
    padding: 1em 1em 3em 1em;
    border: 1px solid silver;
    margin: 0 2em 2em 2em; 
    box-shadow: 10px 0px 25px #555;
    transform: rotate(1deg);
    font-family: 'Rock Salt', cursive;
    color: #999;
    padding-top: 1em;
    line-height: 1.2em;
    text-align: center;
    }

)

Div-Info finde ich in der style.css in diesen Tags, die ich nicht genau verstehe:

header div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
}
main>div {
    width: calc(100% / 5 - 20px);
}

Hätte jemand eine Idee, was in HTML bzw. CSS gemacht werden muss, damit die Fotos nebeneinander stehen.