<label><input type="checkbox" id="rtl"> rtl direction</label>
<section class="parent">
  <div class="wrapper">
    <div class="item" id="d1"></div>
    <div class="item" id="d2"></div>
    <div class="item" id="d3"></div>
    <div class="item" id="d4"></div>
    <div class="item" id="d5"></div>
    <div class="item" id="d6"></div>
  </div>
</section>
* {
  margin: 0;
  padding: 0;
}

label {
  position: fixed;
  top: 2vh;
  left: 50%;
  transform: translateX(-50%);
}
.parent {
  width: 70%;
  height: 100vh;
  margin-inline: auto;
  background-color: #ecececff;
  display: grid;
  align-content: end;
  grid-template-columns: 1fr;
}

.wrapper {
  padding-inline: 2.5vh;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  gap: 2.5vh;
  grid-template-areas: 
    "item1 item2 . . item3"
    "item4 item5 item5 item5 item6";
}

.item {
  height: 17.5vh;
  background-color: #00b68f;
}

#d1 {grid-area: item1}
#d2 {grid-area: item2}
#d3 {grid-area: item3}
#d4 {grid-area: item4}
#d5 {grid-area: item5}
#d6 {grid-area: item6}
document.getElementById('rtl').addEventListener('change', function(){
  document.querySelector('.parent').dir = this.checked ? "rtl" : "lrt";
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.