Kevin Powell - Community•5mo ago

Spanning n number of rows takes up space

I'm working on a form layout using CSS Grid, and I've encountered an issue where there's unexpected additional space at the bottom of my grid layout. Despite there being no elements explicitly placed in the third row, the space persists. I've attached a screenshot for reference. I know I can remove it by changing from row-span-3 to row-span-2 but I need it to stay at span-3. If I make it conditional if there is an error then row-span-3 if there is no error then span 2, but it gets bugged if the field next to it has an element in the third row. Could anyone help me identify the cause of this extra space and suggest how to remove it? Your insights would be greatly appreciated! Thank you!

17 Replies

Chris Bolson•5mo ago

If you have told the element to occupy 3 rows, it will do so. If any of the siblings don't have the same number of rows defined you will see this extra space. Do all the siblings also have row-span-3? Could you share the code for the whole parent element along with the contents?

reljaOP•5mo ago

if i fill out all the fields (siblings) and there are no elements in the third row of any sibling, the space is still there

reljaOP•5mo ago

It should work like this? Even though there is no third element there should be no space

Chris Bolson•5mo ago

Can you paste that as a codeblock. There is far too much to copy out by hand 😅

reljaOP•5mo ago

It has something to do with the reseting of the parents gap when i remove (gap-y-0) row-gap: 0px from the child the child takes the parents gap and the "third element" disappears

reljaOP•5mo ago

but then the gap at the end gets added :_) what part? the whole page?

Chris Bolson•5mo ago

basically the form I wonder if it is related to the subgrid 🤔 but I would like to play with the code to take a closer look.

reljaOP•5mo ago

i can copy you this because its samller but its the same problem

<div class="container"> 
  <div class="item">
    <p>A</p>
    <p>B</p>
<!--     <p></p> -->
  </div>
</div>

<div class="container"> 
  <div class="item">
    <p>A</p>
    <p>B</p>
<!--     <p></p> -->
  </div>
</div>

.container{
  display: grid;
  background: blue;
  row-gap: 20px;
}
.item{
  display: grid;
  grid-template-rows: subgrid;
  background: green;
  grid-row: span 3 / span 3;
  row-gap: 0px;
}
p{
  padding: 0px;
  margin: 0px;
}

.container{
  display: grid;
  background: blue;
  row-gap: 20px;
}
.item{
  display: grid;
  grid-template-rows: subgrid;
  background: green;
  grid-row: span 3 / span 3;
  row-gap: 0px;
}
p{
  padding: 0px;
  margin: 0px;
}

Chris Bolson•5mo ago

If you remove grid-template-rows: subgrid; the issue goes away.
Why do you need to use subgrid for this?

reljaOP•5mo ago

https://youtu.be/sT8UlV_Ku0s?t=250

Dmitry Mayorov

YouTube

CSS Subgrid Layouts Are Here!

In this video, we'll explore together how to use CSS Subgrid for a popular layout: a newsletter sign-up form where everything aligns side by side, and the submit button lines up perfectly with the input fields. This setup can get a bit tricky, especially with the addition of labels and changing help text for the input fields. Previously, achiev...

reljaOP•5mo ago

so that fields stay in the same "lane" even when siblings have error msgs skip to 6:15

Chris Bolson•5mo ago

OK, after watching the video, I understand the use of subgrid for this. Quite a cool trick! (as subgrid still has <90% browser coverage I haven't really looked into it too much). I suspect that, as you are telling the grid that it has 3 rows, it is assigning a minimum amount of space ( height) for each row, even if it doesn't have any content. The same would happen if you give a grid 3 columns but only add 2 elements, it will still leave space for the third.

reljaOP•5mo ago

yea i agree, but its weird that when you overwrite the row gap that this happens if you dont overwrite the gap everything "works", Anyway thank you for taking the time out of your day to try to help me

Chris Bolson•5mo ago

you could set the gap to 0 on both grid levels and use block padding for the spacing 🤔 I would also argue that you need this row to take up space, otherwise, when an error message (or whatever) is added, it will cause the contents to jump to make space. Of course I don't know how you are adding the messages. If they are already present on page load this won't be an issue. But if they are added/removed via JS, this might be an issue.

Gaming

Programming

Spanning n number of rows takes up space