Beyond the Cells: The Complete Guide to CSS Grid Alignment
Creating a grid with `display: grid` is only the first step. The true power of CSS Grid lies in its sophisticated alignment capabilities. Mastering alignment allows you to control not only the space *between* items but also the position of items *within* their cells and the position of the *entire grid* within its container.
The most crucial concept to understand is the difference between aligning **items** and aligning **content (tracks)**.
- Item Alignment: Controls where an item sits *inside* its designated grid cell. (e.g., `justify-items`, `align-items`).
- Track Alignment (Content): Controls the alignment of the grid tracks themselves *within* the grid container, which is only relevant if the total size of the tracks is less than the size of the container. (e.g., `justify-content`, `align-content`).
1. Spacing the Grid: `gap`, `row-gap`, `column-gap`
Before aligning, let's set the space *between* our tracks. The `gap` property is the modern, simple way to do this.
gap: 20px;: Sets a `20px` gap for both rows and columns.gap: 30px 10px;: Sets a `30px` `row-gap` and a `10px` `column-gap`.row-gap&column-gap: You can use these longhand properties individually. (These were formerly `grid-row-gap` and `grid-column-gap`, but those are now deprecated).
2. Aligning *Items* (Inside their Cells)
These properties are set on the **grid container** and define the *default* alignment for all items within it.
justify-items: Aligns items along the **inline (row) axis**. Values include `start`, `end`, `center`, and `stretch` (default).align-items: Aligns items along the **block (column) axis**. Values include `start`, `end`, `center`, `stretch` (default), and `baseline`.
What if you want one *specific* item to be different? You can override these defaults on an individual **grid item** using:
justify-self: Overrides `justify-items` for a single item.align-self: Overrides `align-items` for a single item.
3. Aligning the *Grid Itself* (Track Alignment)
This is what trips many people up. These properties do *nothing* if your grid tracks (`1fr 1fr`, etc.) already fill up 100% of the container.
But, if your container is `500px` wide and your columns are `100px 100px`, you have `300px` of empty space. Where does the grid sit? **This** is what `-content` properties control.
Example: Tracks fill the space
.container {
display: grid;
grid-template-columns: 1fr 1fr;
/* justify-content has no effect */
}Example: Tracks have free space
.container {
display: grid;
height: 300px;
grid-template-rows: 50px 50px;
/* align-content now works! */
align-content: center;
}justify-content: Aligns the entire grid of tracks along the **inline (row) axis**. Values: `start`, `end`, `center`, `space-between`, `space-around`, `space-evenly`.align-content: Aligns the entire grid of tracks along the **block (column) axis**. Values: `start`, `end`, `center`, `space-between`, `space-around`, `space-evenly`.
4. The Almighty Shorthands
Writing all these properties is tedious. Use these shorthands to save time.
place-items: Shorthand for `align-items` and `justify-items`.place-items: center start;(aligns center, justifies start)place-items: center;(aligns center, justifies center)place-content: Shorthand for `align-content` and `justify-content`.place-content: center space-between;place-self: Shorthand for `align-self` and `justify-self`.place-self: end center;
Key Takeaway: To center a single item perfectly in its cell, use `place-items: center` on the container. To center the *entire grid* in the middle of a larger space (like a webpage), use `place-content: center` (assuming your tracks don't fill 100% of the space).
