Using auto margin to center an item in both the horizontal and vertical axes is tricky — unless that item is a grid item.
We already have alignment properties exclusive for CSS layout models (including CSS Grid). To align a grid item in its grid area we can use align-self (vertical alignment) and justify-self (horizontal alignment).
And to center a grid item we give both of those properties the value, center.
Now, margin: auto is something we often use on elements to center them horizontally in their containers.
The centering doesn’t work in vertical axis, till — beside the margin:auto, we also give the elements position:absolute; left:0; right:0; top:0; bottom:0;
But with grid items, we don’t need to give them absolute positioning, margin:auto alone is enough to center the items in both the axes.
Using margin:auto will give the same effect as using align-self and justify-self with value, center, for each, in grid items.
| <head> | |
| <style> | |
| #grid{ | |
| display: grid; | |
| grid-template-areas: "one two three"; /* more style */ | |
| } | |
| .griditems:nth-of-type(1){ grid-area: one; } | |
| .griditems:nth-of-type(2){ grid-area: two; } | |
| .griditems:nth-of-type(3){ grid-area: three;} | |
| .griditems{ | |
| margin: auto; /* more style */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="grid"> | |
| <img src="foo.com/img-1.jpg" class="griditems"> | |
| <img src="foo.com/img-2.jpg" class="griditems"> | |
| <img src="foo.com/img-3.jpg" class="griditems"> | |
| </div> | |
| </body> |
Credit: Illustration used in the post header is by Adam Szary.
