when I create a CSS grid with 2 rows,
grid-template-rows: 100px 200px;
if I use absolute values, then the content will remain within the area of 100px.
but If I use
grid-template-rows: 100px 1fr;
then the content (a paragraph with 10 pages of text) will extend itself across many pages.
I would like the row 2 to take all the available space on the page. But not more. The large content should remain within the area given in the page.
Grid and the fr unit are still quite new to me. But I’m guessing your problem is an old one, all about overall height.
Since you are defining rows, you are setting container heights (which is generally a bad thing in any case).
Not sure how fr works with height, but with width it results in a fraction of the remaining available space in the parent container. But if you container has its default auto value for its height, there is no intrinsic height, so you are asking for a fraction of an unknown. The exact same problem has existed for years when using % for heights, 20% of what? Unless the parent has an explicit height defined, it’s not going to work.
Maybe setting the parent container to height: 100vh will do it, if I understand your requirement, which I’m not sure I do.
Note: Not tried any of this, but it’s my best guess right now.
Seems like it, in Firefox and Chrome at least.
Though there must be more to this design to need grid.
Won’t you need overflow:auto or otherwise it will overflow?
e.g.
main {
background: tomato;
padding: 2em 6em;
overflow:auto;
}
Honestly I did not test that rigorously, or fully understand the OP’s intention. 
I was just thinking as far as fixing the lack of any defined height so the fr actually does something.
1 Like
me too 
Thanks for your help. But your sugggestion does not work. Viewport = the browser’s window size. It should fit within window’s area for the row 2. With grid-template-rows 100px 100vh, the page has a height that exceed the page: page + 100px. By page I mean the area that is visible to the eye without needing to scroll.
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vh
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 100vh;
}
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
When using height on divs in CSS: 100%, the element is usually enclosed within the block area it belongs to. But here I have a grid, and I cannot really use 100%. CSS grids are advanced and there are many possible parameters like fit-content, etc, but it did not work.
I could hard code the second row’s height to be the size I want. But then it will be ugly CSS. Because the page will not be good on different sizes of windows.
What is not clear in what I describe as my problem? Just ask.
- A CSS grid, using display:grid
- Two rows using grid-templat-rows.
grid-templat-rows: 100px XXX (the unknown) - A paragraph in row 2 within a wrapper div with overflow: auto. The paragraph has 10 pages of text as an example.
The problem is that the paragraph will be big and scrolls will appear on the window itself. SCrolls should only appear on the wrapping div due to overflow: auto. An overflow must happen because the grid row should fit within the visible page area.
That’s not what Sam said:(
The 100vh goes on the parent and that allows row2 to reach the bottom of the viewport. If you then add the overflow I mentioned the scroll will be on row2 (not the viewport) and remain within the viewport at all times.
1 Like
Now it has the overflow added and a dash of Lorem Ipsum.
You could get almost the exact same thing just using a fixed header.
The difference being the scroller would be full height, which seems more natural to me, plus better browser compatibility.
2 Likes
AH OK thanks. I will tell you if it works.
Exactly the same effect can be achieved with flexbox for greater browser support.
Indeed the display:table properties could probably achieve similar with support back to ie8.
The main problem with fixed headers is that you can’t have fluid heights without resorting to scripts or magic numbers. They’re ok for one liners but not much useful for anything else.
Yes I agree scrolling just part of a page always seems awkward to me.
4 Likes
Yes, the flex seems a better solution.
That was always the problem with fixed headers, the top margin on the content needs a magic number to clear the header, especially when you (rightly) remover the fixed height from the header.
That got me thinking: surely there is a fix for that need for a magic number. Then remembered that there is, position: sticky. That makes the content automatically clear the header, though it lacks IE support.
So another variation with full height scroller:-
2 Likes
Yes, I don’t know why browsers have been so slow in implementing position:sticky (some implemented it removed it and then re-implemented it again). It’s the obvious solution and especially good on ios devices that ignore usual scroll actions until finished scrolling.
4 Likes
That is exactly what I needed. Thanks !
My favorite solution is the solution using 100vh on the wrapper grid and with overflow: auto on the content.
I don’t need more browser support for my application. CSS grid is my favorite choice. You should know that flex has been reported as having performance issues. I also think grid is a little clearer than flex, especially since I can name my rows.
Using table for grid is somewhat semantically incorrect. Because you add a DOM element for table data just to create your layout. I have used table for a project once and I had some big issues to make one row have 3 columns of 33.3% of the size each. because the % did not add up correctly.
Not sure why you even mention tables, no one in their right mind does that these days.
2 Likes
Paul mentioned display:table to get support for more old browsers like ie8.
display: table does not have the DOM element table.
doc css property table:
table Let the element behave like a table element
In an excellent book I have “Mastering SASS, Luke Watts”, a row grid framework is made using float properties. Good support for old browsers.
p96, it says that using grid frameworks tend to make the user add lots of HTML elements not for content but for layout. The less HTML for layout, the better.
p237 is the raw grid framework using float
It is actually using the compass susy SASS library wiht span(), and the output CSS is made of width, float, margin-right. There are also media queries for the grid on different window size.
It is interesting because the output CSS using float property is very portable accros all browsers.
I prefer to use CSS grids because compass is now marked as deprecated. And I don’t need more browser support.
Using display: table and using actual table elements for layout are not the same thing.
Using display: table is fine semantically, providing the elements that you do use for it are semantically correct. That is the whole point of it, to get a layout that emulates tables, but with the ability to use the most appropriate semantic elements.
3 Likes
OK it is fine semantically. Having a div with a display:table will behave the same as a HTML table.
Still tables have other issues. One guy even said at the link below that maintaining layouts with tables can be a nightmare. I tried it myself without success since % did not work as I wanted.
That is about using actual tables for layout, not display: table.
As has been made clear, you are preaching to the converted with that here.
2 Likes
That article from SO is nearly 10 years old now. Hopefully the author will have got the message by now.
5 Likes