How to layout the following scenarios?

problem description

clipboard.png

for this layout of the page, some of the grid will exceed the width of the div, but the same line of the next div will not be pushed back, how to make the grid of the same line behind instead of being overwritten.

I am not very proficient at the front end. I have tried float and the like to no avail. Do you want to know what the solution is?

Apr.15,2021

float,flex layout can be done either way. In fact, there is a grid layout can also be achieved, but you said that css is not particularly familiar with, grid compatibility is not particularly good, not to mention here.
assume that the html structure is

 .grid-container {
     display: flex; 
     flex-wrap: wrap;
 }
 .grid-item {
    width: xxxx;  //
 }
Menu