4

I've been trying to create a responsive grid layout and almost got it. I am able to make it with this:

.container {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(300px, 1fr));
}

If I have 4 items in my grid, the result looks something like this:

=============
= 1 = 2 = 3 =
= 4 =   =   =
=============

The thing is that I would like the fourth cell (In this case, but could be another, depending on how much items are in my grid) to fill the remaining columns, like this:

=============
= 1 = 2 = 3 =
= 4 = 4 = 4 =
=============

I know this can be done in flex, but if it is possible, I would really like to do it with grid.

Thank you.

.grid {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  background-color: rgba(0,0,0,0.25);
}
<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>
J-P-Robin
  • 162
  • 1
  • 10

1 Answers1

-5

With CSS-Grid, fully automatic and responsive, it is not possible. My advice is to use Bootsrap's Grid system. See the documentation here

D. Pinheiro
  • 646
  • 4
  • 18