Flexbox vs CSS Grid: Self Control

Flexbox vs CSS Grid: Self Control by Wes Bos

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/wesbos/css-grid/master/assets/style.css">
<div class="corners">
  <div class="corner item">1</div>
  <div class="corner item">TWO</div>
  <div class="corner item">3</div>
  <div class="corner item">4</div>
</div>

CSS

.corners {
  display: grid;
  height: 200px;
  width: 200px;
  grid-template: 1fr 1fr / 1fr 1fr;
  border: 10px solid var(--yellow);
  align-content: center;
  align-items: end;
  justify-content: center;
  justify-items: end;
}
.corner:nth-child(1),
.corner:nth-child(2) {
  align-self: start;
}
.corner:nth-child(1),
.corner:nth-child(3) {
  justify-self: start;
}