Hi all,
I’m wondering how to create a grid of five photos with two rows and three columns using HTML and CSS. I want them to line up vertically and horizontally and be centered. I would also like to have an even amount of white-space between each image and an even amount of space to the left and right of the photo grid. Thanks for the help!
Hi there, I’m quite new to all this too so I might get it wrong but:
display: grid inside the css for container and grid-template: repeat(2, 150px) / repeat(3, 150px) // this creates the grid itself (or just use grid-template-rows if i’v gotten the syntax wrong)
then to align vertically, in the grid-container element have: align-content: start, and horizontally justify-content: center.
I think you can also put in the container selector a gap: 20px to space the grid elements out.
It can defo be implemented using align-content (for vertical) and justify-content (for horizonal), maybe have a look at w33 at their possible values (this is all in the css).
Again, just starting out too so apologies if that doesnt work!