CSS - justify-items Property

Hello, aspiring web developers! Today, we're going to dive into the wonderful world of CSS and explore a property that can make your layouts look like they were crafted by a seasoned pro. I'm talking about the justify-items property. Trust me, by the end of this tutorial, you'll be justifying items like a supreme court justice! ?

CSS - Justify Items

What is justify-items?

Before we jump into the nitty-gritty, let's understand what justify-items does. Imagine you have a grid container filled with cute little grid items. The justify-items property is like a magical wand that allows you to control how these items are aligned along the inline (usually horizontal) axis within their grid areas.

Syntax

The basic syntax for justify-items is pretty straightforward:

.container {
  justify-items: value;
}

Where value can be one of many options we'll explore shortly. But first, let's set up a simple grid to play with:

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

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
}

.item {
  background-color: #3498db;
  color: white;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

This creates a 2x2 grid with four items. Now, let's explore the different values we can use with justify-items!

Possible Values

Here's a table of all the possible values for justify-items:

Value	Description
normal	Default value, typically acts like `stretch`
stretch	Stretches items to fill the grid area
start	Aligns items to the start of the grid area
end	Aligns items to the end of the grid area
center	Centers items in the grid area
flex-start	Aligns items to the start (for flex containers)
flex-end	Aligns items to the end (for flex containers)
self-start	Aligns items to their own start side
self-end	Aligns items to their own end side
left	Aligns items to the left
right	Aligns items to the right
baseline	Aligns items along their baseline
last baseline	Aligns items along their last baseline
safe center	Centers items safely (prevents data loss)
legacy right	Right alignment (legacy support)

Now, let's break these down with examples!

CSS justify-items - normal Value

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

The normal value is the default. In most cases, it behaves like stretch. It's like telling your grid items, "Just be yourself!"

CSS justify-items - stretch Value

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

With stretch, your items will spread out to fill the entire width of their grid area. It's like telling your items to take a deep breath and expand!

CSS justify-items - start Value

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

The start value aligns your items to the start of their grid area. Think of it as lining up your items at the starting line of a race.

CSS justify-items - end Value

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

Conversely, end pushes your items to the end of their grid area. It's like your items are trying to touch the finish line!

CSS justify-items - center Value

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

center does exactly what you'd expect – it centers your items in their grid area. It's perfect for creating that balanced, zen-like layout.

CSS justify-items - flex-start and flex-end Values

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

.grid-container {
  justify-items: flex-end;
}

These values are similar to start and end, but they're specifically for flex containers. They're like the cool cousins of start and end who only show up at flex parties.

CSS justify-items - self-start and self-end Values

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

.grid-container {
  justify-items: self-end;
}

These values align items to their own start or end side, which can be different from the container's start or end in some writing modes. It's like letting each item decide which side of the bed they want to sleep on!

CSS justify-items - left and right Values

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

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

These values do exactly what they say on the tin – align items to the left or right. Simple and straightforward, like a good cup of coffee in the morning.

CSS justify-items - baseline and last baseline Values

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

.grid-container {
  justify-items: last baseline;
}

These values align items along their baseline or last baseline. It's particularly useful when you have text of different sizes and want them to line up nicely.

CSS justify-items - safe center Value

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

This value centers items, but ensures that no data loss occurs. It's like having a safety net for your centered items!

CSS justify-items - legacy right Value

.grid-container {
  justify-items: legacy right;
}

This value is for backwards compatibility. It's like keeping an old flip phone around – you probably won't use it, but it's there if you need it!

And there you have it, folks! You've just taken a whirlwind tour of the justify-items property. Remember, the key to mastering CSS is practice. So go forth, experiment with these values, and create some beautifully aligned layouts. Before you know it, you'll be justifying items in your sleep!

Happy coding, and may your grids always be perfectly aligned! ??‍??‍?

Credits: Image by storyset