CSS justify-self Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The justify-self property in CSS is used to align an item within its containing block along the inline (row) axis.

This property is particularly useful when working with CSS Grid Layout, as it allows individual grid items to override the alignment set by the container.

By using justify-self, you can control the alignment of a specific grid item within its cell, providing greater flexibility in design.

💡 Syntax

The syntax for the justify-self property is simple and easy to understand:

Syntax

Copied

element {
  justify-self: value;
}

🎛️ Default Value

The default value of the justify-self property is auto, which means the item will follow the alignment set by the container's justify-items property.

🏠 Property Values

Value	Description
start	Aligns the item at the start of the cell.
end	Aligns the item at the end of the cell.
center	Aligns the item at the center of the cell.
stretch	Stretches the item to fill the cell (default behavior if `justify-self` is not specified).
auto	Inherits the value from the justify-items property of the container or aligns according to the container's alignment.

📄 Example

In this example, we'll demonstrate how the justify-self property can be used to align items within a CSS Grid container.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS justify-self Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      border: 1px solid #ccc;
    }
    .grid-item {
      padding: 20px;
      border: 1px solid #000;
    }
    .item-1 {
      justify-self: start;
    }
    .item-2 {
      justify-self: center;
    }
    .item-3 {
      justify-self: end;
    }
  </style>
</head>
<body>
  <h1>Grid Items with Custom Justification</h1>
  <div class="grid-container">
    <div class="grid-item item-1">Start</div>
    <div class="grid-item item-2">Center</div>
    <div class="grid-item item-3">End</div>
  </div>
</body>
</html>

In this example:

The first grid item is aligned at the start of its cell.
The second grid item is centered within its cell.
The third grid item is aligned at the end of its cell.

🖥️ Browser Compatibility

The justify-self property is widely supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It's advisable to test your layout across different browsers to ensure consistent behavior.

🎉 Conclusion

The justify-self property offers a powerful way to control the alignment of individual items within a CSS Grid container.

By understanding and using this property, you can create more dynamic and responsive layouts. Experiment with different alignment values to see how they affect your design and achieve the desired layout for your web projects.