EXAMPLE
Run 
<!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>