How to Center Elements in CSS Grid

CSS Grid offers several methods for horizontal alignment of elements, but the justify-content: center property only works in specific situations. The correct way to center depends on exactly what you want to align.

Table of Contents

• Why justify-content: center doesn’t always work
• Main alignment properties in Grid
• Proper methods for centering elements
• Alternative solutions
• Practical examples
• Conclusion

Why justify-content: center doesn’t always work

The justify-content property in CSS Grid is designed to align the grid tracks (columns) themselves within the container, not individual elements. It only works when the total width of the grid tracks is less than the width of the container.

In your case with grid-template-columns: repeat(3, 1fr), the grid completely fills the available space, so justify-content: center won’t produce a visible effect. This isn’t a bug, but rather a characteristic of how CSS Grid works.

Important: justify-content aligns the entire grid as a single entity within the container, not individual elements within their cells.

Main alignment properties in Grid

For horizontal alignment in CSS Grid, there are three main properties:

1. justify-content - aligns grid tracks within the container
2. justify-items - aligns all elements within their cells (default value: stretch)
3. justify-self - aligns a single element within its cell

Proper methods for centering elements

1. For centering all elements in cells

Use justify-items: center on the grid container:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center; /* Centers all elements horizontally */
}

2. For centering a single element

Use justify-self: center on the specific element:

.item {
    justify-self: center; /* Centers only this element */
}

3. For vertical centering

For full centering both horizontally and vertically, use both properties:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
}

Alternative solutions

1. Using Flexbox inside Grid

A very popular and effective approach is to make grid items flex containers:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.container > * {
    display: flex;
    justify-content: center;
    align-items: center;
}

This method works without conflicts and allows you to use familiar flexbox properties for centering.

2. Combining with text-align

For text content, you can use text-align: center:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.container > * {
    text-align: center;
}

3. Using auto margins

For more complex cases, you can use automatic margins:

.item {
    margin: 0 auto;
}

Practical examples

Example 1: Simple grid with centered elements

<div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-items: center;
    align-items: center;
}

.grid-item {
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
}

Example 2: Grid with elements of different heights

When elements have different heights, align-items: stretch (the default value) might be undesirable:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-items: center;
    align-items: start; /* Elements align to the top */
}

Example 3: Mixed approach

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px;
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
}

Conclusion

1. justify-content aligns the grid itself within the container, not elements within cells
2. To center elements within cells, use justify-items: center on the container or justify-self: center on individual elements
3. The Flexbox approach inside grid items is a reliable and popular solution
4. Combine horizontal (justify-*) and vertical (align-*) alignment for full centering
5. Remember that 1fr columns fill all available space, so justify-content doesn’t work in such cases

The choice of method depends on your specific task and project structure. For most cases, justify-items: center on the grid container or converting elements to flex containers are optimal solutions.

Sources

1. Aligning items in CSS grid layout - MDN
2. justify-content - CSS | MDN
3. Centering in CSS Grid - Stack Overflow
4. How To Use CSS Grid Properties to Justify and Align Content and Items | DigitalOcean
5. CSS Grid Layout Guide | CSS-Tricks
6. How to Center in CSS with CSS Grid
7. How to Center the Content in Grid