displaying images properly and javascript

ok so, I have a website that I want to put all of my photos on, and so far I have a portrait section, however, it doesn’t display properly, I want it in rows just so it looks neat and tidy, and also when you click on the image it opens it up bigger at the bottom of the page when an image is clicked, I want the page to automatically go down to the image, but also I want it to open a different image, so I can have the high res being displayed at the bottom, and I know for this is all CSS and javascript, but I’m not overly too sure about these.

How can i stop a flexbox item from moving?

so I tried to create a signup page, displayed as a flex, so in the left I’ll have some “welcome ..etc” text and in the right the signup form. I also have a JS script so that whenever an input from the form isn’t “good”, a <small> message would show below the input; The problem is that whenever the script is executed, and a <small message shows up, my flex is resized and the message from the left side is moved down a bit. Is there anyway to achieve this without using position: sticky?

how can i add link to these box

i want to link each box to different link. whole box not only content or image so if user try to click any of these will be sent to the link applied .
i have tried putting a tag on these box but my box color changes and things go wrong.
need help pls