CSS place-self Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 11 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The place-self property in CSS is a shorthand property that allows you to set both the align-self and justify-self properties in a single declaration.

This property is particularly useful when working with CSS Grid, as it provides a convenient way to align an individual grid item within its grid area both horizontally and vertically.

💡 Syntax

The syntax for the place-self property is straightforward. You can specify one or two values, where the first value sets the align-self property and the second value sets the justify-self property.

Syntax

Copied

element {
  place-self: align-self justify-self;
}

If only one value is provided, it will apply to both align-self and justify-self.

🎛️ Default Value

The default value of the place-self property is auto, which means the grid item will follow the default alignment specified by the grid container.

🏠 Property Values

Value	Description
auto	The default value. The item will follow the container's alignment.
start	Aligns the item at the start of the container.
end	Aligns the item at the end of the container.
center	Centers the item within the container.
stretch	Stretches the item to fill the container.

📄 Example

In this example, we'll use the place-self property to center a grid item both horizontally and vertically within its grid area.

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 place-self Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
    }
    .item {
      background-color: lightblue;
    }
    .centered {
      place-self: center;
    }
  </style>
</head>
<body>
  <h1>Grid Item with Custom Placement</h1>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item centered">Centered Item</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The place-self property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The place-self property is a powerful tool for web developers working with CSS Grid.

By allowing you to align individual grid items both horizontally and vertically in a single declaration, it simplifies the process of creating complex grid layouts. Experiment with different values and see how this property can enhance the design and layout of your web projects.