CSS-Grid... giant gaps?

HTML & CSS
1

So… an explanation of a very simple concept.
I have a 2x2 layout of an entire page.
1,1 is a box with a defined height, a defined width.
1,2 is a box with a defined height (the other half of the header)
2,1 is a box with a defined width (call it the menu)
and 2,2 is a box unbounded, which should take up the rest of the space.
This grid should fill the whole browser height, stretching the bottom row to the bottom.

I’ve tried numerous ways of laying this out, but i thought “well thats a grid, so try using grid. It’s a learning exercise.”

So here’s what i’ve got. (I’ll have to codepen this when i get home, can’t log in atm. I’m excluding content from the boxes.)

<html lang="en">
<head> ...etc etc</head>
<body>
  <div id="root">
     <div class="grid">
        <div class="scm">...</div>
        <div class="headbar">...</div>
        <div class="scmnum">...</div>
        <div class="main">...</div>
    </div>
 </div>
</body>
</html>

CSS

.grid {
	height: 100%;
	display: grid;
	grid-template-areas:
		'scm headbar'
		'scmnum main';
	overflow:clip;
	grid-gap: 0px;
}	
.headbar {
	grid-area: headbar;
	height: 90px;
	background-color: #00C;	
}
.scm {
	background-color: goldenrod;
	height: 90px;
	width: 272px;	
	grid-area: scm;
}
.scmnum {
	background-color: goldenrod;	
	grid-area: scmnum;
	width: 272px;
	text-align: center;
}
.main {
	grid-area: main;
}

html,
body,
#root {
	height: 100%;
	overflow: clip;
}

What i end up with though… is a large gap between the rows, with a smaller gap between the columns.

Where did I go wrong?

2

You need to tell the columns and rows that need to grow to take up the rest of the space :slight_smile:
e.g.

.grid{
  grid-template-rows:auto 1fr;
  grid-template-columns: auto 1fr
}

Assuming you wanted it to look like this:

Screen Shot 2021-05-21 at 18.12.26
Screen Shot 2021-05-21 at 18.12.261546×618 8.43 KB

4 Likes
3

In addition to what @PaulOB said, it’s likely also not helping you’re attempting to declare perfect sizes on everything. Particularly with the broken/inaccessible PX metric. This is 2021, they’re called EM, use 'em!

It’s where people screw up with floats a lot too, declaring widths on all parts and floating all parts instead of just declaring an elastic width on some parts and letting flow and/or fluid sizing handle the rest so they can auto grow/shrink to fit.

Also not sure why you’ve got that extra #root div for nothing, and fixing the height of elements is probably a bad idea as well. Let the content handle your sizing.

4

Eh. I think in Pixels. Always have, probably always will. My brain doesn’t have a scope for em. Relative sizing based on the parent just… sounds like a recipe for disaster, tbh, as you try and figure out why 1.5em is this big in this div, but that big in another…

It’s a basic React build, the root comes from the ReactDOM.render function call.

In this particular case, this is an application that runs on a single computer, running nothing but this page, in kiosk/fullscreen mode. So i’m not overly concerned about anyone’s view of the page but my own.

5

Eh. I think in Pixels. Always have, probably always will.

@m_hutley been there done that myself, but since I’ve started using the em, I been loving it, along with using percentages. The more you work with them, the more you get used to it. Useful for RWD :slight_smile: . That is, if you want to learn and make websites based on RWD’s.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.