как сделать такую сетку из Grid или Flex

   .wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }
 .items {border: 1px solid #000;}
  .items:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
  }
  .items:nth-child(2) {
  grid-column-start: 5;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 2;
  }
  .items:nth-child(3) {
  grid-column-start: 7;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 2;
  }
  .items:nth-child(4) {
  grid-column-start: 5;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 3;
  }
  .items:nth-child(5) {
  grid-column-start: 7;
  grid-column-end: 9;
  grid-row-start: 2;
  grid-row-end: 3;
  }
  .items:nth-child(6) {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
  }
  .items:nth-child(7) {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 4;
  }
  .items:nth-child(8) {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 5;
  }
  .items:nth-child(9) {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 4;
  grid-row-end: 5;
  }
  .items:nth-child(10) {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 3;
  grid-row-end: 5;
  }

<div class="wrapper">
    <div class="items">1</div>
    <div class="items">2</div>
    <div class="items">3</div>
    <div class="items">4</div>
    <div class="items">5</div>
    <div class="items">6</div>
    <div class="items">7</div>
    <div class="items">8</div>
    <div class="items">9</div>
    <div class="items">10</div>
</div>