CODEWITHSUNDEEP
htmlcssflexboxcss-gridweb-frontend
Antonio Ramírez Soláns
Antonio Ramírez Soláns

Reputation: 31

How to make an element of a Grid take all remaining space?

I am building a grid layout based on 3 rows and I would like the middle row to take as much space as possible.

The first row should be at the start of the screen (blue bar in the code example) and the third row should be at the end of the screen(red bar in the code example)

How can I achieve this? :S

https://jsfiddle.net/xmghkLvs/31/

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  row-gap: 1%;
}

.top-bar{
  background-color: blue;
  border-radius: 5px;
}

.main-menu{
  justify-self: center;
  display: flex;
  flex-direction: column;
  background-color: green;
}

.bottom-bar{
    background-color: red;
    border-radius: 5px;
}
<div class="grid">
  <div class="top-bar">
    <h1>
     Title
    </h1>
  </div>
  <div class="main-menu">
    <button>
      One Button
    </button>
    <button>
     Other Button
    </button>
  </div>
  <div class="bottom-bar">
   <p>
     I'm a text
   </p>
  </div>
</div>

Upvotes: 2

Views: 3237

Answers (3)

liam
liam

Reputation: 86

You could approach this using Flexbox and 100vh as show below.

.grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.top-bar{
  display: flex;
  height: 20%;
}

.main-menu{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60%;
}

.main-menu button {
  height: 60px;
  width: 120px;
}

.bottom-bar{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20%;
}

Upvotes: 0

tacoshy
tacoshy

Reputation: 13010

1st: Give the grid a min-height like 100vh (.grid { min-height: 100vh; }). This will make consume at least the viewports height.

2nd: Give the the first and last row a height of min-content. That will make it only consume as much height as needed. auto will then consume all remaining space by default.

.grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content auto min-content;
  row-gap: 1%;
}

.top-bar{
  background-color: blue;
  border-radius: 5px;
}

.main-menu{
  justify-self: center;
  display: flex;
  flex-direction: column;
  background-color: green;
}

.bottom-bar{
    background-color: red;
    border-radius: 5px;
}
<div class="grid">
  <div class="top-bar">
    <h1>
     Title
    </h1>
  </div>
  <div class="main-menu">
    <button>
      One Button
    </button>
    <button>
     Other Button
    </button>
  </div>
  <div class="bottom-bar">
   <p>
     I'm a text
   </p>
  </div>
</div>

Upvotes: 2

Sameera Herath
Sameera Herath

Reputation: 201

Try using 100vh

.grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 1%;
    height: 100vh;
}

and add specific height for the .top-bar abd .bottom-bar

Upvotes: 1

Related Questions