Grid Item Alignment Question

HTML-CSS
1

Hey,

I’m following a tutorial and in the media query for min-width: 620px, he uses left/right margin of 20% to center the portfolio grid items. Is there another way to do this? It kind of feels like a hack instead of the proper way to do it, but nothing else I try seems to work.
Here’s the codepen: https://codepen.io/hey-its-j/pen/QWJVKWM

Thanks!

2

Using margins to center items is fine.

You could also change the .projects a selector by making it a flex container and specifying the direction as column:

.projects a {
  display: flex;
  flex-direction: column;
}

I find flex to be very useful for aligning content. Good luck!

2 Likes
3

You can also make .projects a a grid container and use justify-items: center on it.

I would look into auto grids, they work quite well with gallery-type layouts.

3 Likes
4

I think I see what threw me off. He set them as display: block; and then added margin, instead of your idea of using flex, which would’ve made more sense to me. I tried positioning them with flex properties, not thinking about how setting display: block; overrode the original display: flex. Thanks for the help!

1 Like
5

Thanks, I’ll try that too. I’ll look into auto grids as well. I’ve been getting more into grid, but could definitely use more practice. Thanks for the help!

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.