CSS justify-items property
The justify-items property in CSS is known for defining the default justify-self for all the items of the box which gives all of them a default way of justifying each of the boxes along the appropriate axis.
The effect of this property depends on the basis of the layout mode in which we are in. In the case of block-level layouts, the items get aligned inside their containing block on the inline axis. In the case of the absolutely positioned elements, the items get aligned inside their containing block on the inline axis.
In the case of table cell layouts, and flexbox layouts this property gets ignored and in the case of grid layouts, the items get aligned inside their grid areas on the inline axis.
Syntax
justify-items: auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first baseline | last baseline
Example: CSS justify-items Property
Here in the example below, we are using the justify-items property to align our text and container according to the margin values specified by us. In this case, we have given the justify-items property value as a stretch. So, the block containing our text gets aligned in such a way that it gets stretched up to space where our text gets aligned.
<!DOCTYPE html>
<html>
<head>
<title>The justify-items property in CSS</title>
<style type="text/css">
html {
font-family: helvetica, arial, sans-serif;
letter-spacing: 1px;
}
article {
background-color: deeppink;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
width: 300px;
justify-items: stretch;
}
article:hover, article:focus {
justify-items: center;
}
article span {
background-color: blue;
color: white;
margin: 1px;
text-align: center;
}
article, span {
padding: 10px;
border-radius: 7px;
}
article {
margin: 20px;
}
</style>
</head>
<body>
<article class="container" tabindex="0"> <span>First child</span>
<span>Second child</span>
<span>Third child</span>
<span>Fourth child</span>
</article>
</body>
</html>
Output
Example 2: CSS justify-items Property
Here in this second example, we have given the justify-items property value as an end. So, our text and the container containing the text get aligned according to the value specified by us.
<!DOCTYPE html>
<html>
<head>
<title>The justify-items property in CSS</title>
<style type="text/css">
html {
font-family: helvetica, arial, sans-serif;
letter-spacing: 1px;
}
article {
background-color: black;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 40px;
grid-gap: 10px;
width: 300px;
justify-items: end;
}
article:hover, article:focus {
justify-items: end;
}
article span {
background-color: deeppink;
color: white;
margin: 1px;
text-align: end;
}
article, span {
padding: 10px;
border-radius: 7px;
}
article {
margin: 20px;
}
</style>
</head>
<body>
<article class="container" tabindex="0"> <span>First child</span>
<span>Second child</span>
<span>Third child</span>
<span>Fourth child</span>
</article>
</body>
</html>
Output
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term browser compatibility indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
52 |
52 |
| Edge |
12 |
12 |
| Firefox |
20 |
20 |
| Internet Explorer |
11 |
11 |
| Opera |
12.1 |
12.1 |
| Safari |
9 |
9 |
| Webview Android |
52 |
52 |
| Chrome Android |
52 |
52 |
| Firefox Android |
20 |
20 |
| Opera Android |
12.1 |
12.1 |
| IOS Safari |
9 |
9 |
| Samsung Internet |
6.0 |
6.0 |
Conclusion
The initial value for the justify-items property in CSS is legacy. This property is applicable to all elements. It is not an inherited property. The computed value for this property is the as specified one.
