Placing your content centred, not as obvious as imagined
The reason why I'm even asking this is because of the last few videos Kevin made about widths and about rethinking wrappers/containers.
The webapp I'm working on now is a bingo board that I would like to place centered, which typically I would just give it a width and slap a margin auto on it. Or something like that.
These last few videos got me thinking if there's a better, more "correct" way to do it.
2 Replies
Margin auto is a correct way. It's all about preference , some ppl will put flex on the body, some ppl will put grid. There's many ways to achieve the same thing, with centering content , I think it comes down to preference for this use case.
I did enjoy his video about using grid and setting up a template for contained content and full width. I have to watch it again because I'm already forgetting haha
I'm rewatching right now and curious what the difference bw
grid-template-columns: inherit
And
grid-template-columns: subgrid
...Also funnily enough I came across this blog article that may be of help. Haven't read it but the title seems to match your query
https://moderncss.dev/complete-guide-to-centering-in-css/
Modern CSS Solutions
The Complete Guide to Centering in CSS | Modern CSS Solutions
Learn how to finally solve the mystery of centering in CSS using grid, flexbox, and classic block element layout.