CSS Grid Layout With Empty Content (Height)

Question

Please excuse the naïve html newbie question:

I am making an html layout and I want to start with no placeholder text. Just empty elements dividing the screen into three sections, into which I'll insert content later.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #ui {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        height: 100%;
      }
      
      .layout-block {
        background-color: #4472C4;
        margin: 3px;
      }
    </style>
  </head>
  <body>
    <div id="ui">
      <div id="section-1" class="layout-block"></div>
      <div id="section-2" class="layout-block"></div>
      <div id="section-3" class="layout-block"></div>
    </div>
  </body>
</html>

What I expect is something like this:

What I get is this:

I understand that is because the elements' heights are collapsing to zero, due to the absence of any content. But what do I do to fix this?

I would like the grid container (with the id ui) to expand to 100% of the screen height, and I'd like my empty divs to expand in height to fill it.

Many thanks for any help!

@MTilsted, yes, that makes the height 300px, but it does not make it take up 100% of the available screen. PS: I have tried `grid-template-rows: 1fr;` but to no avail. — Leo Orientis, Sep 03 '21 at 19:40
Thanks to whomever associated this question with https://stackoverflow.com/questions/1622027/percentage-height-html-5-css which is a very complete answer. I was sure the question had been answered before. But as it wasn't clear to me where my error was, so of course I didn't know what to search for. — Leo Orientis, Sep 04 '21 at 20:21

score 3 · Answer 1 · answered Sep 03 '21 at 19:43

3

#ui is expanding to fill 100% of the available height. But since there is no content and nothing with padding or margin, both <html> and <body> are collapsing to zero height. Add:

html,body{ height: 100%; }

answered Sep 03 '21 at 19:43

Quasipickle

4,383
1
31
53

score 1 · Accepted Answer · answered Sep 03 '21 at 19:42

Simply replace height: 100% with height: 100vh in your #ui styles. It will give your grid container the height of 100% of the viewport.

Obs: I added a gap between the grid elements just to make their limits visible.

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    #ui {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      height: 100vh;
      gap: 1rem;
    }
    
    .layout-block {
      background-color: #4472C4;
      border: 3px;
    }
  </style>
</head>

<body>
  <div id="ui">
    <div id="section-1" class="layout-block"></div>
    <div id="section-2" class="layout-block"></div>
    <div id="section-3" class="layout-block"></div>
  </div>
</body>

</html>

CSS Grid Layout With Empty Content (Height)

2 Answers2