CSS Grid Alignment: Everything You Need to Know

In this article, we will provide a detailed explanation and exploration of how grid alignments work and how they can be applied in various settings. If you wish to learn more about the basics of grid layout, we recommend starting with Part 1, a more basic guide: https://uipencil.com/2022/09/22/complete-tutorial-for-css-grid-layout-module/

Whether you’re a beginner or have prior experience, you’re sure to find the information provided useful. Let’s delve deeper into the fascinating world of grid alignments.

Essentially, the CSS Grid Layout Module includes 3 distinct types of alignments:

What are Rows and Columns

The vertical lines of grid items are columns.
The horizontal lines of grid items are rows.

1: Row : justify-items

The justify-items property is used to define the alignment of all grid items along the row axis.

.grid_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: stretch;
}
.item{
  background: #1fb4ab;
  border:1px solid black;
  text-align: center;
}

2: Column : align-items

The align-items property is used to define the alignment of all grid items along the column axis.

.grid_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 50px);
  align-items: stretch;
}
.item{
  background: #1fb4ab;
  border:1px solid black;
  text-align: center;
}

3: Shorthand : place-items

You can combine the declaration for align-items and justify-items with place-items shorthand.

align-items: center;
justify-items: end;

/*first value from: align-items , 2nd value from: justify-items*/
place-items: center end;

1: Row : justify-content

The justify-content property is used to define the alignment of the grid container along the row axis.

.grid_container {
  display: grid;
  grid-template-columns: repeat(3, 20px);
  grid-template-rows: repeat(2, 20px);
  justify-content: start;
}

2: Column : align-content

The align-content property is used to define the alignment of the grid container along the column axis.

.grid_container {
  display: grid;
  grid-template-columns: repeat(3, 20px);
  grid-template-rows: repeat(2, 20px);
  align-content: start;
  height: 150px;
}

3: Shorthand : place-content

You can combine the declaration for align-content and justify-content with place-content shorthand.

align-content: center;
justify-content: end;

/*first value from: align-content , 2nd value from: justify-content*/
place-content: center end;

1: Row : justify-self

Define the alignment on the individual grid item along the row axis:

.grid_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.item_stretch{
  background: red;
  justify-self: stretch;
}
.item_start{
  background: blue;
  justify-self: start;
}
.item_end{
  background: pink;
  justify-self: end;
}
.item_center{
  background: yellow;
  justify-self: center;
}

2: Column : align-self

Define the alignment on the individual grid item along the column axis:

.grid_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: 100px;
}
.item_stretch{
  background: red;
  align-self: stretch;
}
.item_start{
  background: blue;
  align-self: start;
}
.item_end{
  background: pink;
  align-self: end;
}
.item_center{
  background: yellow;
  align-self: center;
}

3: Shorthand : place-self

You can combine the declaration for align-self and justify-self with place-self shorthand.

align-self: center;
justify-self: end;

/*first value from: align-self, 2nd value from: justify-self*/
place-self: center end;

Conclusion

In conclusion, the CSS Grid Layout Module allows for precise alignment of elements within a grid system. Through the use of grid lines, grid tracks, and grid cells, you can align elements both horizontally and vertically in a variety of ways.

Understanding the different types of alignments is crucial to utilizing the full potential of the grid layout and you can create more dynamic and flexible layouts for your website or application. cheers!