How would i put images under an <a> tag in css?

Question

So i'm trying to put an image under an a tag.

So i have an <a> tag called "Project_1". Under that tag i want to put an image.
But i have 4 projects.

So i have:

Project_1 Project_2 Project_3 Project_3

And i need:

Project_1 Project_2 Project_3 Project_3
img img img img

Notice: The pics don't touch eachother, there's white space in between.

some html code i have:
https://code.sololearn.com/WUT7ZBNfG4nd

Thank you
Jordi

Answer 1

make a container class (div)
within the container , create 4 item class (div)
within each item add the img+a
style the item class with:
display:flex;
flex-direction:column;

Answer 2

i haven't tried that yet, but it seems workable...imma try it rn. thanks

Answer 3

Correction. Since you want projects together and images together, its better if you make one container class for project, and another container for images.

In the styljng, add width and height to the containers and:
display: grid;
Grid-template-columns: 1fr 1fr;
Grid-template-rows: 1fr 1fr;

If you want space between the images use the following style in the container class:
Grid-gap:20px;