What is the best way to create an empty grid-template-row that can expand to occupy the remaining space?

Is there a way to design a grid layout with 3 rows that will take up the entire screen, even if some of the rows are empty?

Let's say the header and footer are 100px and 50px respectively. The main area should occupy the rest of the screen.

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px auto 50px;
}

header {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: bisque;
}

main {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: chocolate;
}

footer {
  grid-column: 1/2;
  grid-row: 3/4;
  background-color: darkolivegreen;
}
<body class="grid">

  <header>
    Header
  </header>

  <main>
    Main
  </main>


  <footer>
    Footer
  </footer>

</body>

I have searched for similar questions but haven't found a suitable solution yet (I am still learning web designing).

htmlcsscss-grid

Answer №1

It appears that the height: 100vh property is missing from your code, which allows content to occupy the entire viewport height.

You may want to consider adding the following:

  .grid {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 100px 1fr 50px;
      height: 100vh; /* Ensures content fills the entire viewport */
  }

Answer №2

There are two options to consider, one being superior to the other:

  1. Calculate the height of the parent div and use 1fr
.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px 1fr 50px;
  min-height: 100vh;
}
  1. Omit the grid-template-rows property and calculate the heights of the children individually
.grid {
  display: grid;
  grid-template-columns: 1fr;
}

header {
  background-color: bisque;
  height: 100px;
}

main {
  background-color: chocolate;
  height: calc(100vh - 250px);
}

footer {
  background-color: darkolivegreen;
  height: 150px;
}

As mentioned earlier, the first solution is more intricate and sophisticated...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using React to Dynamically Render a Form Select with Two Pre-Defined Options (and mapping the remaining options)

Being relatively new to front-end development, especially React, I'm typically more of a back-end developer. Recently, the other developers on my team have left the company, leaving me alone to figure out the entire stack of our platform written in Re ...

htmlreactjs

Exploring Android phone contacts using PhoneGap and Sencha Touch

Can anyone assist me in retrieving a list of all contacts from my phone using the code below? var App = new Ext.Application({ name: 'SmsthingyApp', useLoadMask: true, launch: function () { Ext.data.ProxyMgr.registerType("contactstorage", ...

javascriptandroidhtmlcordovasencha-touch

Column alignment in Bootstrap 4

My objective is to create a page consisting of multiple rows, each containing a label column, a control column, and an optional unit of measure column. I aim for the label column to be consistent across all rows, adjusting to fit the longest label. To achi ...

htmljquerycssbootstrap-4

Two variations of identical descriptions within a single div container

Is there a way for me to use an item, specifically an img, within the same div class but with different definitions? For example: section .row img { margin: 0 0 30px; width: 100%; border: 4px solid #18a00e; } section .row img { margin: 0 ...

htmlcss

Adjusting the transparency of the background without altering its colors

I need help figuring out how to merge custom palettes I've created such as this one, which resulted in a .css and .less file. While I want to retain the colors, I also require certain elements' backgrounds to be transparent. To achieve this, I c ...

htmlcsstwitter-bootstrap

The BBCode seems to be malfunctioning

I created a custom BBCode for my PHP website to display tabbed content on a page. After testing the BBCode on a separate webpage and confirming there are no errors, I am facing an issue where the tabbed content is not showing up on the actual posting page. ...

phphtmlbbcode

The element is not positioned correctly due to the absolute positioning

This is my first attempt at creating a jQuery plugin and I have almost got it working correctly. You can view the example here. I've been struggling for days to position an element as desired. The goal is to display some text with an optional downwar ...

javascriptjquerycss

Spots on a spinning wheel

I created a simple carousel design: .index { background-color: var(--color-blue); } .container { display: flex; overflow: auto; outline: 10px solid black; flex: none; } .container.x { width: 100%; flex-flow: row nowrap; } .x.mandatory-s ...

htmlcsscarousel

How can I evenly distribute three list items on a PhoneGap webpage using CSS?

My goal is to create a PhoneGap app with a main menu featuring a title and three buttons. Here is the layout: <body> <div class="app"> <div class="headerOne"> <h1></h1> </d ...

htmlcsscordova

How can I align a div in a vertical manner if it is displayed as a circle?

This is the creation I have come up with: This is the design I am aiming for: Below is the code I have written: <div id="OR"><span style=" vertical-align: middle;background:blue;">OR</span></div> Here is the corresponding CSS: ...

htmlcsscss-positionvertical-alignment

The onchange function in JavaScript is malfunctioning

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Product page</title> <!-- Fonts -- ...

javascripthtmlcss

The table of 100 elements contained within a div does not expand to the width of the div, but

Here is a different layout to consider: <div style="float: left"> content1 </div> <div style="float: left"> <table width="100%"><tr><td>dfsd</td></tr></table> </div> Now, there is an issue where ...

htmlcss

Creating two separate divs that can scroll independently while also limiting each other's scroll depth can be achieved by utilizing

I am attempting to replicate the unique scrolling feature seen on this particular page. Essentially, there are two columns above the fold that can be scrolled independently, but I want their scroll depths to be linked. When a certain depth is reached whil ...

javascripthtmlcss

The functionality of uploading both images and videos in one submission is not reliable when it comes to file size restrictions

I've been struggling for a long time trying to figure out how to solve my issue. I need to upload an image and a video file using the submit function, each with different size requirements - the image should be around 1MB and the video file around 10M ...

phphtml

Exploring ways to transfer a function variable between files in React

Currently, I am working on a quiz application and have the final score stored in a function in app.js. My goal is to generate a bar graph visualization of the user's results (e.g. 6 right, 4 wrong) based on this score. To achieve this, I created anoth ...

javascripthtmlreactjschart.js

Initiate an Ajax request solely for the elements currently visible on the screen

I am currently facing an issue that requires a solution. Within our template, there are multiple divs generated with the same classes. Each div contains a hidden input field with the ID of the linked target site. My task is to utilize this ID to make aja ...

javascriptjqueryhtmlajaxrest

What is the best way to transform the hashMap<String, String> into a practical JavaScript object?

To make a long story short. The backend team has provided me with a hashMap that looks like this: {12=Other Services (Assisted), 2=Other Services, 4=Collect, 17=Get New (For Me), 19=Get New (For My Business)} As a front-end developer, I am not familiar ...

javascriptjavajqueryhtmljstl

VS Code warning about unused CSS selectors in SvelteKit

Is there a way to get rid of the Unused CSS selector warning in VS Code? I keep getting this warning in all files where I use <style lang="scss">. While I'm aware that I don't use the .btn class in some components, I still want it ...

cssvisual-studio-codesasssveltesveltekit

The flotation feature is experiencing some issues

My floating property seems to be causing some alignment issues with the text. When I use the float property, there is always some space left at the top of the following element. Here is an example of my code: <img src="badimage.jpg" alt="bad image" st ...

htmlcss

Applying a color gradient to nodes in d3 v5 based on their degree

If we were working with d3 v5, how might we go about coloring nodes based on their degrees? It's important that the visualization clearly shows nodes with higher degrees in darker shades and nodes with lower degrees in lighter shades. I attempted to ...

htmlcssjsond3.js