CSS justify-items Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 15 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The justify-items property in CSS is used to align items along the inline (row) axis within a grid container. It affects the alignment of grid items within their grid area, providing control over how they are positioned horizontally.

This property is useful when you want to adjust the alignment of items in a grid layout, making it an essential tool for creating flexible and responsive designs.

💡 Syntax

The syntax for the justify-items property is straightforward. It is applied to a grid container and can take several values that determine the alignment of grid items.

Syntax

Copied

.container {
  justify-items: value;
}

🎛️ Default Value

The default value of the justify-items property is stretch, which means that grid items are stretched to fill the entire grid area along the inline axis.

🏠 Property Values

Value	Description
start	Aligns items at the start of the grid area's inline axis.
end	Aligns items at the end of the grid area's inline axis.
center	Centers items along the grid area's inline axis.
stretch	Stretches items to fill the grid area (default behavior).

📄 Example

In this example, we'll demonstrate how to use the justify-items property to align grid items in different ways.

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-items Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      border: 1px solid #ccc;
    }
    .item {
      padding: 20px;
      border: 1px solid #000;
      background-color: #f0f0f0;
    }
    .start {
      justify-items: start;
    }
    .center {
      justify-items: center;
    }
    .end {
      justify-items: end;
    }
    .stretch {
      justify-items: stretch;
    }
  </style>
</head>
<body>
  <h1>justify-items Property Example</h1>
  <h2>Start</h2>
  <div class="container start">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

  <h2>Center</h2>
  <div class="container center">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

  <h2>End</h2>
  <div class="container end">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

  <h2>Stretch</h2>
  <div class="container stretch">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The justify-items property is widely supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it's advisable to test your design in various browsers to ensure consistent behavior across all platforms.

🎉 Conclusion

The justify-items property provides precise control over the alignment of grid items within a grid container. By using different values, you can align items at the start, center, end, or stretch them to fill the grid area.

This property is particularly useful in responsive design, where layout flexibility is key. Experiment with justify-items to create visually appealing and functional grid layouts for your projects.