0

This is my html :

<div id="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

and my css :

#wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#wrapper {
  border: 2px solid #f76707;
  
}

#wrapper > div {
  border: 2px solid #ffa94d;
}

And this is the result :

enter image description here

There is a jsFiddle for it.

How come the rows are not stretched to occupy all the available screen space ?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Chapo
  • 2,563
  • 3
  • 30
  • 60

1 Answers1

1

because your wrapper doesnt have full screen height. refactor your code like this:

#wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height:100vh;
}
Besufkad Menji
  • 1,433
  • 9
  • 13