Hey, great discussion idea! 🏆
Center one or more items within a container horizontally and vertically:
display: grid; place-content: center;
Details and more centering options >
My other favorite is responsive equal-width columns that break to row layout below a minimum width:
display: grid; grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
See it in practice > Read about how it works >
Hi, Stephanie! Thanks! First time I've heard about using grid to center items this way. I mostly use flexbox:
display: flex; justify-content: center; align-items: center;
It's nice to always have options!
The responsive grid columns is awesome as well. I believe Chris Coyier called this "The Most Powerful Lines in Grid".
Thanks for sharing!
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hey, great discussion idea! 🏆
Center one or more items within a container horizontally and vertically:
Details and more centering options >
My other favorite is responsive equal-width columns that break to row layout below a minimum width:
See it in practice >
Read about how it works >
Hi, Stephanie! Thanks! First time I've heard about using grid to center items this way. I mostly use flexbox:
It's nice to always have options!
The responsive grid columns is awesome as well. I believe Chris Coyier called this "The Most Powerful Lines in Grid".
Thanks for sharing!