CSS (Cascading Style Sheets) is a powerful tool that allows web developers to control the presentation and layout of their websites. One of the key properties in CSS is justify-items, which is used to control the alignment of grid items within a grid container. In this article, we will explore the justify-items property in detail and provide examples to help you understand its functionality.
The justify-items property is used to align grid items along the horizontal axis within a grid container. It applies to all grid items within the container unless overridden by the justify-self property on individual items. The property accepts several values, each of which determines how the items are aligned. Let’s take a look at these values and their effects.
1. start: This value aligns the items to the start of the grid container. It is the default value if no other value is specified.
2. end: This value aligns the items to the end of the grid container.
3. center: This value aligns the items to the center of the grid container.
4. stretch: This value stretches the items to fill the entire width of the grid container.
5. baseline: This value aligns the items to the baseline of the grid container.
Now, let’s see some examples to understand how the justify-items property works in practice.
Example 1:
“`html
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: start;
}
.item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
“`
In this example, the justify-items property is set to “start”. As a result, the grid items are aligned to the start of the grid container.
Example 2:
“`html
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}
.item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
“`
In this example, the justify-items property is set to “center”. As a result, the grid items are aligned to the center of the grid container.
Example 3:
“`html
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: end;
}
.item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
“`
In this example, the justify-items property is set to “end”. As a result, the grid items are aligned to the end of the grid container.
Example 4:
“`html
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: stretch;
}
.item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
“`
In this example, the justify-items property is set to “stretch”. As a result, the grid items are stretched to fill the entire width of the grid container.
Example 5:
“`html
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: baseline;
}
.item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
“`
In this example, the justify-items property is set to “baseline”. As a result, the grid items are aligned to the baseline of the grid container.
In conclusion, the justify-items property in CSS is a powerful tool for controlling the alignment of grid items within a grid container. By understanding its various values and their effects, you can create visually appealing and well-aligned layouts for your website. Experiment with different values and see how they impact the positioning of your grid items.