Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS justify-self Property

Posted in CSS Tutorial
Updated on Oct 03, 2024
By Mari Selvan
👁️ 13 - Views
⏳ 4 mins
💬 1 Comment
CSS justify-self Property

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
Copy To Clipboard
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

ValueDescription
startAligns the item at the start of the cell.
endAligns the item at the end of the cell.
centerAligns the item at the center of the cell.
stretchStretches the item to fill the cell (default behavior if justify-self is not specified).
autoInherits 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy