Grid Alignment
Grid provides container-level alignment through justify-items, align-items, justify-content, and align-content, while individual items can use justify-self and align-self.
As with Flexbox, distinguishing item alignment from track distribution is essential.
Grid Alignment Levels
Grid Alignment
.grid {
display: grid;
place-items: center;
min-height: 400px;
}💡
place-items is shorthand for align-items and justify-items, centering each grid item within its grid area.Key Takeaways
place-itemscombinesalign-itemsandjustify-items.- Grid distinguishes item alignment from distribution of the entire grid.
Knowledge Check
What does `place-items: center` do in Grid?