Aligning Content and Elements Using CSS Grid Properties

CSS Grid is a powerful tool for creating two-dimensional web layouts.
Understanding your grid's alignment capabilities allows you to control the position of elements and the spacing between them. This way, you can more easily build complex and responsive designs that work on any device.

You can center elements or create asymmetrical layouts with just a single line of code.

In this article, we will examine how to align content using CSS Grid.
You will learn:

• Alignment of grid container: justify-content, align-content
• Alignment of grid items within their own cells: justify-items, align-items, justify-self, align-self

We will cover each feature with clear explanations and practical examples. We will also show you how to use these features together and touch on real-life usage scenarios.

In addition, we will guide you to create both efficient and user-friendly designs by touching on best practices and accessibility.

Summary

• Alignment in CSS Grid is divided into two main categories:
  Properties that align the grid container and properties that align grid elements.

• justify-content and align-content distribute the remaining space for the entire grid within the container.

• justify-items and align-items determine the default alignment of each element within its own cell.

• justify-self and align-self can be used to change the alignment of a single element.

• Shortcut features place-content and place-items make code cleaner and more efficient.

• You should always maintain a logical HTML source order. Because visual reordering with CSS alone can cause accessibility issues for those using screen readers.

---

Prerequisites

To follow this article practically, you will need the following:

• Basic knowledge of CSS properties and values
• A code editor
• A modern web browser that supports CSS Grid

---

Introduction to CSS Grid Layout

CSS Grid Layout is a powerful two-dimensional layout system within CSS itself.
Unlike Flexbox (which is one-dimensional and designed for row or column alignment only), Grid can handle both rows and columns at the same time.

Thanks to this feature, Grid is an excellent tool for creating complex web layouts not only in small components (for example, image galleries or forms) but also in entire page structures.

At its core, Grid allows you to simply create a grid structure and place elements within that structure exactly the way you want.
The key to truly understanding this system is to understand its powerful alignment properties.

Aligning content and elements correctly:

• Making Responsive (sensitive) designs,
• To provide a neat and organized appearance,
• It is critical for building visually appealing interfaces that adapt seamlessly to different screen sizes.

Before moving on to alignment features, let's quickly define two basic concepts:

• Grid Container: display: grid; is the parent HTML element that you implemented. This element becomes a grid and creates a new grid formatting context for its direct children.

• Grid Item: Direct child elements of the Grid Container. These are the elements you can arrange and align within the grid.

First, let's create a common HTML structure that we will use in all examples. This structure will be a container consisting of six child elements, and we will convert it to a grid:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

The CSS we will use to convert this HTML structure to a grid can be as follows:

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto;

  box-sizing: border-box;
  width: 400px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;

  background: #dceff7;
  border: 2px solid rgba(114, 186, 94, 0.35);
}

.grid-item {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background: #FBF2C0;
  border: 2px solid rgba(236, 198, 48, 0.5);
}

This code creates a grid layout with 3 columns 100px wide each.
Each grid element has the dimensions 50px width and 50px height:

---

What is Aligning and Justifying a Grid Container?

These properties distribute the spaces within the grid container.
That is, you can see the effects when the total size of the grid consisting of columns and rows is smaller than the size of the container.

In summary: If your grid does not cover the entire area, these properties determine how to use the remaining space.

justify-content

The justify-content feature aligns the grid along the inline axis.

Values ​​you can use:

• start: Snaps the grid to the starting edge. (Default)
• end: Snaps the grid to the end edge.
• center: Aligns the grid columns to the center of the container.
• space-between: First element snaps to start, last item snaps to end; those in the middle are distributed with equal space.
• space-around: Leaves equal space on both sides of each column.
• space-evenly: Leaves exactly equal space between all columns and between them and the edges.

Example (using center):

.grid-container {
  justify-content: center; /* Yatayda ortalama */
}

Grid elements are aligned horizontally in the middle of the columns.

align-content

The align-content feature aligns the grid along the column (vertical / block) axis.

Values you can use:

• start: Snaps the grid to the top edge. (Default)
• end: Snaps the grid to the bottom edge.
• center: Centers grid rows vertically.
• space-between: The spaces in between are distributed equally, with the first line at the top and the last line at the bottom.
• space-around: Leaves equal space above and below each line.
• space-evenly: Leaves equal space between lines and between edges and lines.

Example:

.grid-container {
  align-content: space-evenly; 
}

place-content

place-content is a shortcut to set both align-content and justify-content properties in one line.

• Initial value → align-content (vertical alignment)
• Second value → justify-content (horizontal alignment)

Example:

.grid-container {
  place-content: end space-between; 
}

If only a single value is given, that value is applied to both align-content and justify-content.

.grid-container {
  place-content: center; 
}

---

What is Aligning and Justifying Grid Elements?

These properties are defined on the grid container but determine how each element is positioned within its own cell.

justify-items

justify-items aligns elements within cells along the inline axis.

Values you can use:

• stretch: Stretch the element to cover the entire width of the cell. (Default)
• start: Aligns the element to the left side of the cell.
• end: Aligns the element to the right side of the cell.
• center: Aligns the element horizontally to the center of the cell.

Example:

.grid-container {
  justify-items: center; 
}

align-items

align-items aligns elements within cells along the column (vertical / block) axis.

Values you can use:

• stretch: Stretch the element to cover the entire height of the cell. (Default)
• start: Aligns the element to the top of the cell.
• end: Aligns the element to the bottom of the cell.
• center: Aligns the element vertically to the center of the cell.

Example:

.grid-container {
  align-items: end; 
}

place-items (Shortcut)

place-items allows you to define both align-items and justify-items features in one line.

• Initial value → align-items (vertical alignment)
• Second value → justify-items (horizontal alignment)

This feature is one of the easiest ways to center elements within their cells.

Example:

.grid-container {
  place-items: center; 
}

---

Alignment for Individual Elements

Sometimes you may just want a single grid element to be aligned differently than the others.
To do this, you apply alignment properties directly to that element.

justify-self

justify-self overrides the container's justify-items setting for a given element.
Aligns the cell on the horizontal axis.

Possible values: start, end, center, stretch

Example:

.grid-container {
  justify-items: start; 
}

.grid-item:nth-child(3) {
  justify-self: end; 
}

align-self

align-self overrides the container's align-items setting for a given element.
Aligns vertical axis within the cell.

Possible values: start, end, center, stretch

Example:

.grid-container {
  align-items: center; 
}

.grid-item:nth-child(3) {
  align-self: start; 
}

place-self

place-self is a shortcut used to simultaneously define both align-self and justify-self properties on an element.

• Initial value → align-self (vertical alignment)
• Second value → justify-self (horizontal alignment)

Example:

.grid-item:nth-child(3) {
  place-self: end end; 
}

---

Combining Multiple Grid Alignment Features

Alignment properties in CSS Grid are not mutually exclusive.
Rather, it allows you to fine-tune the design much more by working together at different levels.

• Container level: justify-content and align-content → determine how the entire grid will be aligned.
• At the element level (default): justify-items and align-items → sets the default alignment of all elements within the cell.
• At the individual element level: justify-self, align-self or place-self → allows you to align a single element independently of the others.

By using these features together, you can arrange both the overall layout and individual elements in a flexible, responsive and visually balanced way.

The most important concept to remember is separation of responsibilities:

• *-content properties (justify-content, align-content) → Determines how the entire grid will be aligned in the space within the container.
• *-items properties (justify-items, align-items) → Determines how each element is aligned within its cell.

These features are used together in the example below:

.grid-container {
  justify-content: space-evenly;
  justify-items: center;
  align-content: space-evenly;
  align-items: center;
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto;

  box-sizing: border-box;
  width: 400px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;

  background: #dceff7;
  border: 2px rgba(114, 186, 94, 0.35);
}

.grid-item {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background: #FBF2C0;
  border: 2px rgba(236, 198, 48, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

This code centers the entire grid within the container using the place-content property (i.e. shortcut justify-content and align-content),
also centers each element in its own cell with place-items (shortcut justify-items and align-items):

---

Result

Now you have discovered all alignment features of CSS Grid:

• place-content to align the entire grid,
• place-items to organize items in their cells,
• You've seen using place-self to customize individual items.

Once you understand the basic difference between container and element alignment, you can create complex, responsive and pixel-precise layouts much more easily. Moreover, you can do this with cleaner and more readable code.

Next step: experimenting.

• Apply what you have learned with practical examples,
• See different results by changing the values,
• And start to really master these powerful tools by using them in your own projects.