<div class="grid">
  <div></div>
</div>
<div class="grid">
  <div></div>
  <div> text</div>
</div>
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div>content</div>
</div>

.grid {
  display: inline-grid;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

/**/
.grid {
  width: 300px;
  aspect-ratio: 1;
  grid-gap: 5px;
  outline: 2px solid red;
  vertical-align: top;
  margin: 10px;
  counter-reset: num;
}
.grid *{
  border: 2px solid;
  font-size: 30px;
  box-sizing: border-box;
  font-family: sans-serif;
  display: grid;
  place-content: center;
}
.grid *:before {
  content: counter(num);
  counter-increment: num;
}