CSS Grid different layout in one block

how's it going? I'm just wondering is it possible to put 3 different layouts in one css grid. Cause I can't find the right solution. I need this structure: 66% - 33% , 33% 33% 33%, 20% 20% 20% 20% 20% Image of a structure

Here's how it looks on a website

Here's the structure of ea

&:nth-child(1){
            grid-column-start:1;
            grid-column-end:20;
            grid-row-start:1;
            grid-row-end:3;
        }
        &:nth-child(2){
            grid-column-start:20;
            grid-column-end:30;
            grid-row-start:1;
            grid-row-end:3;
        }
        &:nth-child(3){
            grid-column-start:1;
            grid-column-end:10;
            grid-row-start:3;
            grid-row-end:4;
        }
        &:nth-child(4){
            grid-column-start:10;
            grid-column-end:20;
            grid-row-start:3;
            grid-row-end:4;
        }
        &:nth-child(5){
            grid-column-start:20;
            grid-column-end:30;
            grid-row-start:3;
            grid-row-end:4;
        }


        &:nth-child(6){
            grid-column-start:1;
            grid-column-end:6;
            grid-row-start:4;
            grid-row-end:5;
        }
        &:nth-child(7){
            grid-column-start:6;
            grid-column-end:12;
            grid-row-start:4;
            grid-row-end:5;
        }
        &:nth-child(8){
            grid-column-start:12;
            grid-column-end:18;
            grid-row-start:4;
            grid-row-end:5;
        }
        &:nth-child(9){
            grid-column-start:18;
            grid-column-end:24;
            grid-row-start:4;
            grid-row-end:5;
        }
        &:nth-child(10){
            grid-column-start:24;
            grid-column-end:30;
            grid-row-start:4;
            grid-row-end:5;
        }

Solution

I need this structure: 66% - 33% , 33% 33% 33%, 20% 20% 20% 20% 20%

That is what you have in your second image

Your first image (which from your comments is required) appears to have the first row at more like 60% / 40%.

So...it's not necessary to specify row/column start and end, just the amount each element spans..

.grid {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  grid-auto-rows: 50px;
  grid-auto-flow: row;
  gap: .5em;
}

.item {
  display: grid;
  place-items: center;
  outline: 1px solid red;
}

.item.w-18 {
  grid-column: span 18;
}

.item.w-12 {
  grid-column: span 12;
}

.item.w-10 {
  grid-column: span 10;
}

.item.w-6 {
  grid-column: span 6;
}

<div class="grid">
  <div class="item w-18">1</div>
  <div class="item w-12">2</div>
  <div class="item w-10">3</div>
  <div class="item w-10">4</div>
  <div class="item w-10">5</div>
  <div class="item w-6">6</div>
  <div class="item w-6">7</div>
  <div class="item w-6">8</div>
  <div class="item w-6">9</div>
  <div class="item w-6">10</div>
</div>