EXAMPLE
Run 
<!DOCTYPE html>
<html>

<head>
	<title>The justify-self property in CSS</title>
	<style type="text/css">
		html {
	  font-family: helvetica, arial, sans-serif;
	  letter-spacing: 1px;
	}
	
	article {
	  background-color: purple;
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  grid-auto-rows: 40px;
	  grid-gap: 10px;
	  width: 300px;
	  justify-self: flex-end;
	}
	
	span:nth-child(2) {
	justify-self: self-end;
	}
	
	span:nth-child(3) {
	justify-self: self-start;
	}
	
	span:nth-child(4) {
	justify-self: first baseline;
	}
	
	article span {
	  background-color: black;
	  color: white;
	  margin: 1px;
	  text-align: center;
	}
	
	article, span {
	  padding: 10px;
	  border-radius: 7px;
	}
	
	article {
	  margin: 20px;
	}
	</style>
</head>

<body>
	<article class="container"> <span>First child</span>
		<span>Second child</span>
		<span>Third child</span>
		<span>Fourth child</span>
	</article>
</body>

</html>