centering content inside a grid container?
codepen won't work because it's next/react, but i've posted it there so you can read it easier...
https://codepen.io/Laing91/pen/ZENzaQj
I'm wanting to create a photo album grid and looking at it right now, the images are all hugging the start of their grid-area, and I'm not sure how to center them.. justify-content and align-items doesn't work.
4 Replies
Go into the dev tools and select the parent that has display:grid declared. Next to it in the elements will be a tag that says "grid" so you can toggle on and off the grid. Then in the styles, next to the display:grid property is a little icon-clicl on that and you can play either all of the alignment properties and find the ones you want. Additionslly you could try place-items: center (which is a shorthand for justify-items and align-items as place-content: center; is a shorthand for justify-content and align-content)
in this case justify-items: center should work
in your project, inspect element, right-click the container element and copy outerhtml. that should be okay for codepen.
also make sure your selectors are correct.
when i look at the css, you're selecting the h1 inside of the albumContainer.
while in the js it is a sibling
thanks both, got it working 🙂
fixed, thanks Mark, that's because I moved the h1 outside the container, forgot to fix the CSS :/