default positioning and overlapping with CSS grid [closed]

Question

my goal is to create a gantt chart. for that, I started to create the displayed grid with CSS display : grid; and I succeed to obtain something that looks nice to me.

but then I try to put an issue on this grid and this tag shifts my beautiful grid like in this snippet :

.gantt
{
display : flex;
gap : 0;


margin : 1em;

.jour
{
    padding : 1em;
    height : 25px;
    
    border : 1px solid #AAA;
        
    width : 30px;
    z-index : 0;
    
    text-align : center;
    align-self: center;
    
}

.zone_issues
{
    display : grid;
    grid-template-columns : repeat(3, 1fr);
                                
    .issue
    {
        z-index : 2;
        
        margin : 0.8em;
        padding : 0.3em 0 0.3em 1em;
        
        align-self: center;
    }
    
}

}

<div class="gantt">
        <div class="zone_issues">
            <div class="jour" style=""></div>
            <div class="jour" style=""></div>
            <div class="jour" style=""></div>
            <div class="jour" style=""></div>
            <div class="jour" style=""></div>
            <div class="jour" style=""></div>
            <div class="issue" style="background-color: #ffbd7c; grid-row-start: 1; grid-column: 2 / 4;">test issue</div>
        </div>
</div>

after some tests, I succeed to put the issue on the good place by setting all cells of the grid with grid-row-start and grid-column-start like in this snippet :

.gantt
{
display : flex;
gap : 0;


margin : 1em;

.jour
{
    padding : 1em;
    height : 25px;
    
    border : 1px solid #AAA;
        
    width : 30px;
    z-index : 0;
    
    text-align : center;
    align-self: center;
    
}

.zone_issues
{
    display : grid;
    grid-template-columns : repeat(3, 1fr);
                                
    .issue
    {
        z-index : 2;
        
        margin : 0.8em;
        padding : 0.3em 0 0.3em 1em;
        
        align-self: center;
    }
    
}

}

<div class="gantt">
        <div class="zone_issues">
            <div class="jour" style="grid-row-start: 1; grid-column-start: 1;"></div>
            <div class="jour" style="grid-row-start: 1; grid-column-start: 2;"></div>
            <div class="jour" style="grid-row-start: 1; grid-column-start: 3;"></div>
            <div class="jour" style="grid-row-start: 2; grid-column-start: 1;"></div>
            <div class="jour" style="grid-row-start: 2; grid-column-start: 2;"></div>
            <div class="jour" style="grid-row-start: 2; grid-column-start: 3;"></div>
            <div class="issue" style="background-color: #ffbd7c; grid-row-start: 1; grid-column: 2 / 4;">test issue</div>
        </div>
</div>

I feel that all this css code at cells and issues looks like superfluous. Is there a possibility to set all background cells at there default positions and to position issues to overlap the grid ?

I precise that the final grid will overflow the width of the windows then a scrollbar will permit to move the entire chart (grid + issues).