CODEWITHSUNDEEP
htmlcssangularlayoutfrontend
ilhmjv
ilhmjv

Reputation: 7

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

Upvotes: -1

Views: 62

Answers (1)

Dalantren
Dalantren

Reputation: 1

Probably you should go with flex here instead of grid.

.ncinc_data {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Upvotes: -1

Related Questions