Grid Property Similar to Flex-Grow

Question

I discovered a bug with Chrome version 75's implementation of flexbox. Hence I wanted to see if the issue persists with grid, but the test will only work if there is a grid property that is similar to flex-grow due to the current structure of my document.

body {
  display: flex;
  flex-direction: column;
}
header {
  /* height is implicitly determined by font-size and padding */
}
main {
  flex: 1;
  scrollbar-width: none;
  overflow-y: auto;
}
::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;
}
footer {
  /* height is implicitly determined by font-size and padding */
}

Is there a similar grid property?

score 1 · Accepted Answer · edited Jun 11 '19 at 22:20

1

You can rely on 1fr to fill the remaining space:

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin: 0;
  height: 100vh;
}

header {
  padding: 15px;
  font-size: 1rem;
  background: red;
}

main {
  background: green;
  overflow:auto;
  padding:10px;
}

footer {
  padding: 15px;
  font-size: 1rem;
  background: blue;
}

<header>this is a header</header>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean enim nulla, tincidunt at laoreet sed, sodales a arcu. Cras cursus diam eget diam venenatis egestas. Sed in massa pharetra, malesuada felis et, posuere nisl. Etiam eget mauris suscipit, consequat leo in, tincidunt lectus. Morbi pellentesque accumsan lectus sed finibus. Vivamus eros mi, eleifend vitae nibh id, vulputate posuere nulla. Integer dictum justo non nunc tincidunt, lacinia faucibus nisl vestibulum. Mauris luctus ultrices diam, at malesuada sem. Curabitur auctor, mauris in fermentum vestibulum, libero velit molestie leo, ut placerat velit ligula vel mauris. Integer tortor purus, sagittis vel libero sed, egestas vehicula velit. Mauris ullamcorper, arcu at facilisis vehicula, lectus lacus scelerisque felis, ut mattis dolor justo ac tellus.

Fusce porttitor turpis eget felis vestibulum viverra. Sed hendrerit nisl interdum tortor suscipit convallis. Donec aliquet massa sapien, ac congue lacus ullamcorper sed. Donec felis lectus, fermentum ut vestibulum sit amet, mattis ac ipsum. Etiam ut purus libero. Mauris maximus sem at ex posuere, at venenatis nisi sollicitudin. Vestibulum consequat sem risus, vitae sodales augue rutrum venenatis. Vivamus varius, lectus consequa
</main>
<footer>this is a footer</footer>

edited Jun 11 '19 at 22:20

oldboy

5,729
6
38
86

answered Jun 11 '19 at 22:03

Temani Afif

245,468
26
309
415

with flexbox, `header` always remains visible at the top of the page, whereas `footer` always remains visible at the bottom of the page, even when the content of `main` is too big for the remaining space. in other words, in a `grid` context, `main` seems to grow beyond the remaining space if there is enough or too much content, whereas in a `flex` context you can make it so that `main` only ever takes up the remaining space and itself becomes scrollable. does that make sense? im going to edit my question – oldboy Jun 11 '19 at 22:14
it might have something to do with the implicit `heights` – oldboy Jun 11 '19 at 22:17
@Anthony this is what I have done, no? check the update, I added some content and scroll – Temani Afif Jun 11 '19 at 22:17
hmmm something in my code must be interfering with it or something. lemme check my code – oldboy Jun 11 '19 at 22:19
ahhh you had `100vh` and not `100%`. this might break it on mobile. ill have to test, but youve answered my question nonetheless. – oldboy Jun 11 '19 at 22:21
so the issue/bug with chrome v75 has something to do with flexbox specifically – oldboy Jun 11 '19 at 22:21
@Anthony it can also work with `100%` but you have to also add 100% to `html` – Temani Afif Jun 11 '19 at 22:22
thats the way i had it, `html, body { height: 100% }`, and it wasnt working that way. `main` grows beyond the remaining space when its set to `100%` locally on my machine for some reason. – oldboy Jun 11 '19 at 22:24
@Anthony Ah, don't tell you aren't adding the Doctype at the top of your document? – Temani Afif Jun 11 '19 at 22:26
what do u mean??? i just found out why it wasnt working with `100%`, it had something to do with some of the other styles i was applying to both `html, body {}` – oldboy Jun 11 '19 at 22:27
@Anthony I meant this : ` `. Are you adding it to the top of your document? – Temani Afif Jun 11 '19 at 22:28
nono def not lol was adding it in CSS. i believe the issue was i also had `html, body { display: grid; }` which was being applied to both of em – oldboy Jun 11 '19 at 22:29
is it true that if i adjust styles via JS (i.e. `ele.style.top = n + 'px'`) the browser always re-renders the document, whereas if i simply add, remove, or toggle a class, the browser doesnt end up re-rendering? – oldboy Jun 11 '19 at 22:35
1

@Anthony it doesn't matter how you change the value (either with JS or with CSS), the browser will always re-render on value changes – Temani Afif Jun 11 '19 at 22:36
ok thanks. i watched [a recent conference talk](https://www.youtube.com/watch?v=l23fbEZ-jKE) the other day and if i remember correctly im pretty sure buddy said changing any styles via JS forces the WHOLE page to re-render, whereas if u change a style via CSS only parts of the document are re-rendered?? – oldboy Jun 11 '19 at 22:44
1

@Anthony probably there is more context on where he said this but from what I know there is no difference in change a property value either inline or with a class. I will watch the video when I get a chance to understand what he meant .. by the way here is a useful link: https://csstriggers.com/top – Temani Afif Jun 11 '19 at 22:53
when u watch the video let me your thoughts on what he says regarding that!! thanks and thanks for the link too – oldboy Jun 11 '19 at 22:56
hey buddy, i cant seem to find the question or my project wherein you offered the solution of styling elements via CSS VARs progressively with something like `nth-child`. do you know what im talking about? if so, could u point me to a reference somewhere? thanks <33 – oldboy Oct 02 '19 at 22:45
1

@BugWhisperer this one https://stackoverflow.com/a/56094769/8620333 ? – Temani Afif Oct 02 '19 at 22:47

Grid Property Similar to Flex-Grow

1 Answers1