Signup/Sign In
PUBLISHED ON: APRIL 12, 2021

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.



About the author:
I like to write content about technology, helping users to understand technical terms easily. I also write about Python, Java, and various other programming language. I have an experience of 3+ years in content creation.