CODEWITHSUNDEEP
htmlcsscss-grid
Roland Stojkoski
Roland Stojkoski

Reputation: 93

CSS Grids Empty Space Left Before An Element That Would Fit In It

Hi guys I could not find any helping examples since I have never used CSS grids, anyways how would I fill the empty space in the grid with next element? My 1fr element does not fit in the previous space that is available. Is it due to that I'm doubling the height of the class or what? Like I've said I have never used CSS grids but I only need them now and this is the last thing I would add to the code, could you guys help me out?

#container {
  width: 40%;
  margin-left: 20%;
  margin-bottom: 1rem;
  display: grid;
  float: left;
  grid-template-columns: auto;
}

#container>div:nth-child(1) {
  margin-top: 0 !important;
}

.content-1x,
.content-2x,
.content-3x {
  margin: 1rem 1rem 0 0;
  height: 15rem;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.double-height {
  height: 30rem;
}

.content-3x {
  grid-area: auto / auto / auto / span 3;
}

.content-2x {
  grid-area: auto / auto / auto / span 2;
}

.content-1x {
  grid-area: auto / auto / auto / span 1;
}
<div id="container">
  <div class="content-3x">
    3
  </div>
  <div class="content-2x double-height">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-2x">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-2x">
    4
  </div>
  <div class="content-3x">
    6
  </div>
  <div class="content-2x">
    7
  </div>
  <div class="content-1x">
    8
  </div>
  <div class="content-1x">
    9
  </div>
  <div class="content-2x">
    10
  </div>
</div>

Is there any easy way to do this without using media queries or sth like that?

Upvotes: 1

Views: 3824

Answers (1)

Gautam Naik
Gautam Naik

Reputation: 9348

Try this, add

grid-auto-flow:dense; to grid container

This attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

Also for .doubleheight, u r adding height to it, but u r not telling the grid layout that u are occupying that much space, this is necessary because, other divs position depends on it. U can do this by adding 

   .double-height {
      height: 31rem;
      grid-row: span 2!important;
      grid-column: span 2!important;
    }

This code tells, the double-height div to go 2 columns to the right from its own position, and go 2 rows down from its own position.

#container {
  width: 40%;
  margin-left: 20%;
  margin-bottom: 1rem;
  display: grid;
  float: left;
  grid-template-columns: auto;
  grid-auto-flow:dense;
}

#container>div:nth-child(1) {
  margin-top: 0 !important;
}

.content-1x,
.content-2x,
.content-3x {
  margin: 1rem 1rem 0 0;
  height: 15rem;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.double-height {
  height: 31rem;
  grid-row: span 2!important;
  grid-column: span 2!important;
}

.content-3x {
  grid-area: auto / auto / auto / span 3;
}

.content-2x {
  grid-area: auto / auto / auto / span 2;
}

.content-1x {
  grid-area: auto / auto / auto / span 1;
}
<div id="container">
  <div class="content-3x">
    3
  </div>
  <div class="content-2x double-height">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-2x">
    4
  </div>
  <div class="content-1x">
    5
  </div>
  <div class="content-2x">
    4
  </div>
  <div class="content-3x">
    6
  </div>
  <div class="content-2x">
    7
  </div>
  <div class="content-1x">
    8
  </div>
  <div class="content-1x">
    9
  </div>
  <div class="content-2x">
    10
  </div>
</div>

Upvotes: 6

Related Questions