How to fit CSS grid layout items when there is not enough item

Question

I'm trying to craft a layout with the CSS grid. At first, I handled it with grid maker sites, well everything was reliable before I realize that the problem is that: my layout is not dynamic.

See the below picture it is what I wanted to do and did it:

Now when I remove one of the grid children this happens:

So it is my question: how I can make something that is dynamic? I mean when I do not have enough items another items be fitted in the wrapper, something like this:

CSS-Grid can't do that automatically. That's what flexbox is designed for. — Paulie_D, Nov 13 '20 at 21:05
@Paulie_D you are right but for flex layout i must put left and right side in a wapper, the layout items i needa design should not be in wrapper. — ThisIsWilliam, Nov 13 '20 at 21:13

score 1 · Accepted Answer · answered Nov 13 '20 at 21:20

grid allow to combine row and columns, flex, is one or the other.

What you can do , is to set the CSS to match different cases :

demo from 5 to one child

html {
  display: grid;
  min-height: 100vh;
}
body {
  margin: auto;
  display: flex;
  flex-wrap:wrap;
}
.grid {
  width: 40vh;
  height: 20vh;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 5px;
  padding: 5px;
  background: tomato;
  counter-reset:divs
}
.grid:nth-child(even) {
  background: crimson;
}
.grid div:before {counter-increment:divs;content:counter(divs)}
.grid div {
  background: gray;
}
.grid div:nth-child(1),
.grid div:nth-last-child(1):nth-child(2) {
  grid-row: span 2;
  grid-column: span 2;
}
.grid div:nth-last-child(1):nth-child(even) {
  grid-column: span 2;
}
.grid div:nth-last-child(2):nth-child(2),
.grid div:nth-last-child(2):nth-child(2) + div {
  grid-column: span 2;
}

.grid div:last-child:first-child {
  grid-column: span 4;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div> 
</div>
<div class="grid">
  <div></div>
  <div></div>
  <div></div> 
</div>
<div class="grid">
  <div></div>
  <div></div> 
</div>
<div class="grid">
  <div></div> 
</div>

How to fit CSS grid layout items when there is not enough item

1 Answers1