how to get rid of empty space?

this is all because grid or flex creates a row when moving to another line, but how to get rid of this row? I hope for help, I've already tried everything

.ncinc_data {
width: 100%;
display: grid;
padding-right: 2em;
gap: .5em;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
grid-auto-flow: row dense;
grid-auto-rows: 1fr;
height: auto;
justify-content: center;
align-items: start;
min-height: 200px;
grid-auto-rows: min-content;
}

.ncinc_data-item {
flex-direction: column;
min-height: 0;
height: auto;
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
background: red;
}


<div class="ncinc_data">
<div class="ncinc_data-item"></div>
<div class="ncinc_data-item"></div>
<div class="ncinc_data-item"></div>
<div class="ncinc_data-item"></div>
</div>


enter image description here

Continue reading...