HTML CSS - CSS Grid Alignment

Advanced alignment techniques with CSS Grid

CSS Grid provides powerful alignment properties to control the positioning of grid items. This tutorial covers advanced alignment techniques using CSS Grid, including aligning items within the grid container and aligning items within their grid areas.

Aligning Items Individually

Use align-self and justify-self to align individual grid items within their grid areas. Here are some examples:

.grid-item {
    background-color: #3498db;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.align-start {
    align-self: start;
    justify-self: start;
}

.align-end {
    align-self: end;
    justify-self: end;
}

.align-center {
    align-self: center;
    justify-self: center;
}

.align-stretch {
    align-self: stretch;
    justify-self: stretch;
}
            

Aligning All Items in the Grid Container

Use align-items and justify-items to align all grid items within the grid container. Here are some examples:

/* Align all items to the start */
.grid-container-start {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    align-items: start;
    justify-items: start;
}

/* Align all items to the center */
.grid-container-center {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    align-items: center;
    justify-items: center;
}
            

Aligning Items Horizontally and Vertically

Use align-content and justify-content to control the alignment of the grid as a whole. Here are some examples:

/* Align content to the start */
.grid-container-align-content-start {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    align-content: start;
    justify-content: start;
}

/* Align content to the center */
.grid-container-align-content-center {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
    align-content: center;
    justify-content: center;
}
            

Combining Alignment Properties

You can combine align-items, justify-items, align-content, and justify-content to create complex alignment effects. Here is an example:

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

Summary

In this tutorial, you learned advanced alignment techniques with CSS Grid. You explored using align-self and justify-self for individual item alignment, align-items and justify-items for aligning all items within the grid container, and align-content and justify-content for controlling the alignment of the grid as a whole. Understanding and applying these techniques will enable you to create precise and sophisticated grid layouts, enhancing your skills as an advanced web developer.