Overlapping Boxes HTML/CSS Project: Can't seem to align boxes properly, any advice?

Hi everyone, I’m working on a personal project where I am trying to align these large boxes in one horizontal line, with smaller boxes overlapping on top. My goal is to align all of the large boxes on one line at the top left of the page, with the smaller boxes overlapping in different positions.

My strategy so far was to use the inline-grid property to get all the big boxes in one line, and then add the small boxes as child elements of each big box. However, once I add all boxes, the gray and purple ones move down, out of line. I’ve tried changing the position property, and changing the dimensions of the grids, but can’t seem to get them in-line.

This is how it looks currently:

<!DOCTYPE html>
<html>
<head>
    <title>Boxes</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <div class="gray">
        <div class="orange"></div>
    </div>
    <div class="black">
        <div class="yellow"></div>
    </div> 
     <div class="blue">
         <div class="green"></div>
    </div>
    <div class="purple">
        <div class="pink"></div>
    </div>   
</body>
</html>
.gray { 
    width: 200px;
    height: 200px;
    background-color: gray;
    display: inline-grid;
    grid-template-columns: 50px 50px;
    grid-template-rows: 50px 50px;
}

.orange {
    width: 100px;
    height: 100px;
    background-color: orange;
    grid-column-start: 3;
    grid-column-end: 4; 
}

.black {
    width: 200px;
    height: 200px;
    background-color: black;
    display: inline-grid;
    grid-template-columns: 50px 50px;
    grid-template-rows: 50px 50px;   
}

.yellow {
    width: 100px;
    height: 100px;
    background-color: yellow;
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

.blue {
    width: 200px;
    height: 200px;
    background-color: blue;
    display: inline-grid;
    grid-template-columns: 50px 50px;
    grid-template-rows: 50px 50px; 
}

.green {
    width: 100px;
    height: 100px;
    background-color: green;
    grid-column: 1 / 3;
    grid-row: 3 / 4;    
}

.purple {
    width: 200px;
    height: 200px;
    background-color: purple;
    display: inline-grid;
    grid-template-columns: 50px 50px;
    grid-template-rows: 50px 50px; 
}

.pink {
    width: 100px;
    height: 100px;
    background-color: pink;
    grid-column-start: 1;
    grid-column-end: 3; 
}

Any advice?

Thanks in advance!

Hello @system0138242035

The way I would fix this is by nesting your whole grid in a container div and the following css.

.container {
	grid-template-columns: auto auto auto auto;
    display: grid;

The grid-template-columns property allows you to define the amount of columns you wish to have in your grid followed by a value specifying the width of each column. The value auto gives each of these columns the same width.

Your code should render like this then :

You can find more info on Grid Containers on w3schools

Thank you for your suggestions @dol0s!