Understanding why the cell height in my grid is too high

[jptsetme]

First, thanks for all the great support you have provided over the years. Most answers to questions I have been able to figure out with the help of google and previous responses to questions here.

I am trying to build a site based on a design that has been given to me. The homepage layout has some overlapping content, and I’ve gotten pretty close to what the designed asked for, but I suspect I have not chosen super well for the row and column layout for my grid. Attached is a screenshot of what the design is supposed to look like, and then a shot of how it looks on my staging site right now. I’ll add a post with creds so you can take a look and see what I’ve done, but my basic question is, why, when I have set up the rows as 100px 1fr 100px 1fr, is Grid1.Cell2 so high, when it is the only cell in that “row”, and it has only 4 buttons which consume only about 60% of the height. I’d like the cell to be only high enough to contain the 4 buttons within it.

Thanks for your help!

Design:

[Album] imgur.com

Current layout that is too high:

[Album] imgur.com

[christian]

Hey @jptsetme,

That’s because of the Cell’s layout. Try playing around with the Cell’s Y Start and Y End Layout values.

If you look at the Cell Overlap Grid template, you’ll notice that the right Cell’s height depends on its content while the left Cell is not.

I’d recommend you learn more about the usage of the CSS Grid element here https://www.youtube.com/watch?v=Q7XuYdxhuJY&list=PLWPh_GoP7hYXHrOv3sYUNQ5mVeApTnkO2

Hope that helps.

[jptsetme]

Thanks – this was very helpful.

[ruenel]

You are most welcome, @jptsetme.