I'm trying to modify the code at

https://codepen.io/rperry1886/pen/KKwbQNP

to have the images display left-to-right rather than vertically. I've tried reading up on Flexbox, i.e., https://css-tricks.com/snippets/css/a-guide-to-flexbox/ , which seems to suggest that changing

flex-direction: column;

to

flex-direction: row;

should do the trick; but that seems to have no effect on the code above. Can anyone explain why that is, and how I'd go about trying to have items display left-to-right here?

CodePudding user response：

Just set display:flex; and flex-direction:row; to the grid-container, NOT the body. If it doesn’t work, add .grid-container {display:flex; flex-direction:row;} at the very bottom after every bracket.