Kevin Powell - Community•2mo 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•2mo 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?

relja•2mo 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

relja•2mo ago

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

Chris Bolson•2mo ago

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

relja•2mo 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

relja•2mo ago

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

Chris Bolson•2mo 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.

relja•2mo 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•2mo ago

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

relja•2mo 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...

relja•2mo ago

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

Chris Bolson•2mo 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.

Gaming

Programming

Spanning n number of rows takes up space