Arrange 4 divs in cascade in 4 columns

Issue

I need to arrange 4 cascading divs that look like they are in 4 columns.

This is my html structure (I can't modify it)

<div class="col1">
    1111
    <div class="col2">
        2222
        <div class="col3">
            3333
            <div class="col4">
                4444
            </div>
        </div>
    </div>
</div>

I need it to look like when used:

display: grid;
grid-template-columns: repeat(4, minmax(200px, 1fr));

I also tried with grid-template-areas but I have not achieved the expected results.

Solution

Correction on old answer.

Okay so my last answer I read your question wrong to say "I can modify it" instead of "I can't modify it", I do apologize for that.

New Answer

Here is how you would achieve that grid like structure given the children were all top level with that css styling. It involves just a little bit of math and is a bit harder to maintain if things change, but will give the exact same result as the grid div.

.col1{
  display: grid;
  grid-template-columns: minmax(200px,1fr) minmax(600px,3fr);
}
.col2{
  display: grid;
  grid-template-columns: minmax(200px,1fr) minmax(400px,2fr);
}
.col3{
  display: grid;
  grid-template-columns: minmax(200px,1fr) minmax(200px,1fr);
}

<div class="col1">
    1111
    <div class="col2">
        2222
        <div class="col3">
            3333
            <div class="col4">
                4444
            </div>
        </div>
    </div>
</div>

Explanation

So in your example of using a grid with a min max repeated, we must consider that each element will be a minimum of 200 and a maximum of 1fr... Therefore because they are nested col1 must be the width of all of them...
So it must be have 2 children (it's content and the other divs), first it's child should have a minmax of 200px and 1fr because we want it to be a minimum of 200px the 1fr works because the second child has a min max of 3 times (for the other 3 children) that of the first child... Which gives the illusion of 4 columns... If you had 5 children you could walk through the same calculations.
Here is a Codepen demonstrating how the size of the div always matches that of the other css styles you provided and will continue to stay the same size. It's a bit redundant in how the classes are defined, but I wouldn't count on another solution in pure html/css.

Hope this helps. Thanks

Answered By - Sharp Dev