<figure class="fig">
  <div class="grid grid--a">
    <div class="item"></div>
    <div class="item item--placed"></div>
    <div class="item"></div>
    <div class="item item--order"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</figure>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 60px;
}

figure {
  margin: 0;
}

figcaption {
  margin: 0 0 20px 0;
}

:root {
  --columns: 2;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 120px);
  gap: 20px;
  border: 2px dotted;
  counter-rest: item;
  max-width: 40rem;
  margin: 60px auto;
}

.item {
  background: linear-gradient(135deg, sandyBrown, chocolate);
  counter-increment: item;
  padding: 20px;
}

.item::after {
  content: counter(item);
}

.item--placed {
  background: linear-gradient(135deg, powderBlue, steelBlue);
}

.item--implicit {
  background: linear-gradient(135deg, mediumPurple, blueViolet);
}

.grid--a {
  .item--placed {
    grid-row: 3;
    grid-column: 2 / span 2;
    order: -1;
  }
  
  .item--order {
    order: -1;
    background: linear-gradient(135deg, darkViolet, indigo);
  }
}