Aligning with Precision: Alignment Properties in CSS Grid
Position your grid items exactly where you need them by mastering justify-items, align-items, and the gap property.
Welcome! Let's explore how to align items in a CSS Grid. First, we need a grid container.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}Grid Gap: Defining Space
The grid-gap property (or the modern gap) is a shorthand for setting the space between grid rows and columns. For example, gap: 20px 10px; sets a 20px gap between rows and a 10px gap between columns.
Justify Items: Row Axis Alignment
justify-items aligns content inside a grid item along the **row (inline) axis**. Common values are start, end, center, and stretch (the default), which makes the item fill the entire width of its cell.
Align Items: Column Axis Alignment
align-items aligns content inside a grid item along the **column (block) axis**. It accepts the same values as justify-items: start, end, center, and stretch (the default).
The 'place-items' Shorthand
The place-items property is a convenient shorthand for setting both align-items and justify-items at once. The syntax is place-items: <align-items> <justify-items>;. If you provide only one value, it applies to both. For perfect centering, just use place-items: center;.
Practice Zone
Interactive Test 1: Drag & Drop
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Fill in the Blanks
Rellena los huecos en cada casilla.
.container { display: grid; gap: ; justify-items: ; align-items: ; }
Practice Example: Code Editor
Use the editor to make the grid items align to the end of the row axis and the start of the column axis. Give them a 20px gap.
Grid Element Alignment
| Property | Description |
|---|---|
| grid-gap | Defines the space between rows and columns in the grid. |
| justify-items | Aligns items inside their cells horizontally. |
| align-items | Aligns items inside their cells vertically. |
| justify-content | Aligns the grid inside its container horizontally. |
| align-content | Aligns the grid inside its container vertically. |
* Write your CSS code and apply it to see the results.
Results:
Practical Grid Alignment Techniques
Grid alignment properties are the key to creating clean, professional, and responsive layouts. Let's move beyond theory and see how these tools solve common design problems with live examples.
1. The Holy Grail: Perfect Centering
Centering an element both vertically and horizontally used to be a challenge. With Grid, it's trivial. The combination of display: grid and place-items: center on a parent container is all you need.
.parent {
display: grid;
place-items: center;
height: 200px; /* Needs a defined height */
}2. Card Layouts with Consistent Alignment
When creating a grid of cards, you might want the content inside each card to align differently. Use align-items to ensure text or buttons are consistently positioned, regardless of content height.
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
align-items: end; /* Aligns all items to the bottom */
}3. Full-Bleed vs. Centered Content
By default, grid items stretch to fill their cell. You can override this with justify-items. This is useful for creating sections where some elements span the full width while others are centered within their column.
.container {
display: grid;
justify-items: center; /* Center all items by default */
}
.full-width {
justify-self: stretch; /* Override for this specific item */
}Practical Takeaway: Masterjustify-items,align-items, andplace-itemsto move from simply creating grids to artfully directing the flow and position of content within them. These properties are your most powerful tools for creating intentional, robust layouts.