72. Grid Alignment: Justify vs. Align
Grid uses similar alignment properties to Flexbox, but they relate to the grid structure rather than the flow.
1. Justifying/Aligning Items (Item Placement within a Cell)
These properties are applied to the container and control how individual items are placed within their grid cell (or area) if the item is smaller than the cell.
justify-items: Aligns items horizontally (along the row axis) within their cell.align-items: Aligns items vertically (along the column axis) within their cell.
| Value | Description |
|---|---|
stretch (default) | Item fills the cell. |
start, end, center | Positions item at the start, end, or center of the cell. |
2. Justifying/Aligning Content (Grid Placement within Container)
These properties are used when the total size of the grid tracks is smaller than the grid container itself. They control where the entire grid structure is placed inside the container.
justify-content: Aligns the entire grid horizontally in the container.align-content: Aligns the entire grid vertically in the container.
| Value | Description |
|---|---|
center | Centers the grid structure. |
space-between, space-around, space-evenly | Distributes extra space between the tracks. |
Quick Rule: If you want to center a single item, you can use justify-self: center; and align-self: center; directly on the item (similar to Flexbox align-self).