Can anyone explain what is going on?

Question

I was trying to make a 3×3 porcupine image frame. I succeed but couldn't understand how it happened. Can anyone explain?
https://code.sololearn.com/WViLn0hsJ19P/?ref=app

Answer 1

You will better understand it just replace img tag with div and put number in them .
It will clear u what is going where and how.
You will get that this is working as creating table

Answer 2

You have displayed id flex as row
So its child div.column
comes horizontally
and as div.column are display as fex column hence img comes vertically

Answer 3

You have missed to close div for id="a"
Insert a </div> at last