CODEWITHSUNDEEP
csscss-grid
Deeswoc
Deeswoc

Reputation: 180

How to add white space at end of grid rows without stretching items

I'm trying to layout a container div to fill the size of the screen but I want the empty rows to be at minimum width, e.g. 40px, and just have empty space after the last row. But the content stretches and I don't know why. 

.container{
  display: grid;
  min-height: calc(100vh - 100px);
  grid-template-rows: minmax(40px, auto);
  background: red;
}

.test{
  grid-row: 2;
  width: 350px;
}

.content-after-grid{
  margin: 0;
  background-color:black;
  width: 100vw;
  height: 100px;
}
<div class="container">
  <img src="https://cms-static.wehaacdn.com/hoards-com/images/milk.16566.jpg" class="test">
</div>
<div class="content-after-grid">
</div>

The image in the snippet is supposed to be 40px from the top and the remaining space should be empty. More or less it should work like auto-fill. How do I go about achieving this?

Edit: I've added an image to show what I'm trying to do in more detail. I also added a block after the grid to show what's happening so far. The image should be in a row that shares its height. That is why I use minmax(). Because I want empty rows to to have a height of 40px but rows with content expand to fit that content hence the minmax(40px, auto). It should be working like auto-fill would be for grid-template-rows and grid-template-columns

Target Layout

Upvotes: 0

Views: 1466

Answers (1)

Loi Nguyen Huynh
Loi Nguyen Huynh

Reputation: 9948

Is this what you want? What you need is grid-template-rows: 40px auto 1fr;: the first row takes 40px, and the last row takes all the remaining space

body {
  padding: 0;
  margin: 0;
}

.container{
  display: grid;
  min-height: 100vh;
  grid-template-rows: 40px auto 1fr;
  background: red;
}

.test{
  grid-row: 2;
  width: 350px;
}

.content-after-grid{
  margin: 0;
  background-color:black;
  width: 100vw;
  height: 100px;
}
<div class="container">
  <img src="https://cms-static.wehaacdn.com/hoards-com/images/milk.16566.jpg" class="test">
</div>
<div class="content-after-grid">
</div>

Upvotes: 1

Related Questions