W3Schools Tryit 编辑器 - W3Schools 中文教程

<!DOCTYPE html>
<html>
<head>
<style> 
#container {
  width: 50%;
  aspect-ratio: 2/1;
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr;
  writing-mode: vertical-rl;
}

#container > div {
  border: 1px solid black;
}

.blue {
  background-color: lightblue;
  inline-size: 60%;
  justify-self: end;
}

.red {
  background-color: coral;
  inline-size: 50%;
}

.green {
  background-color: lightgreen;
  inline-size: 70%;
}
</style>
</head>
<body>

<h2>justify-self with writing-mode: vertical-rl</h2>

<p>Grid items are aligned at the start of the grid container in the inline direction by default, and the blue div is set to 'end' in the inline direction with justify-self property. Inline direction is moved from horizontal to downwards direction with the writing-mode property, so now the end of the contianer in the inline direction is at the bottom of the contianer instead of to the right of it.</p>

<div id="container">
  <div class="red">RED</div>
  <div class="blue">BLUE</div>
  <div class="green">GREEN</div>
  <div class="red">RED</div>
</div>

</body>
</html>