Kevin Powell - Community•2d ago

Grid question

Hello, I created to my mom a family tree website. It have a grid layout. Under 700px born, death, partnership, family going under each other:

.born {
        grid-area: 5 / 2 / 6 / 4;
    }
    
    .death {
        grid-area: 6 / 2 / 7 / 4;
    }
    
    .partnership {
        grid-area: 7 / 2 / 8 / 4;
    }
    
    .family {
        grid-area: 8 / 2 / 9 / 4;
    }

.born {
        grid-area: 5 / 2 / 6 / 4;
    }
    
    .death {
        grid-area: 6 / 2 / 7 / 4;
    }
    
    .partnership {
        grid-area: 7 / 2 / 8 / 4;
    }
    
    .family {
        grid-area: 8 / 2 / 9 / 4;
    }

I would like these four to fit to the content. If I add

.container {
        grid-template-rows: auto 1fr;
    }

.container {
        grid-template-rows: auto 1fr;
    }

everythging is fit to the content and left side "names" have more than 400 person, which make an endless scroll. How can I fit to the content only those 4 ?

15 Replies

ἔρως•2d ago

400 names is a lot of scrolling but if you have to list them all, make sure the container has overflow, or the entire page has to scroll

lanszelotOP•2d ago

Thank you for your response. It have overflow, but

.container {
        grid-template-rows: auto 1fr;
    }

.container {
        grid-template-rows: auto 1fr;
    }

overwrite it.

Kevin Powell•2d ago

You'll want a height on the .container too. The grid cells will be as big as they need to be. If it has a max-height: 100vb the 1fr will fill up to that height then.

ἔρως•2d ago

vb?

Kevin Powell•2d ago

logical version of vh

lanszelotOP•2d ago

I could not give max-height to the names I have no idea why

Kevin Powell•2d ago

give it to the entire container

lanszelotOP•2d ago

if I give max height the site fall a part container have a fix height 100 vh

ἔρως•2d ago

what happens if you give it max height and overflow: hidden?

Kevin Powell•2d ago

k, that's perfect. Is there a parent element inside of the names grid area, or is it just all the names?

lanszelotOP•2d ago

could you give me a minute, I started to upload the site to my server, and easier if you see it. --link deleted because it contain personal datas-- here is the site please try with : Aczél Júlianna

Kevin Powell•2d ago

okay... now I'm not completely sure waht the problem is, lol

lanszelotOP•2d ago

less than 700px width I do not know how to left top search, choose Aczél Júlianna , close the search with left top X where was the searc icon And start to scrooooolll I know the search icon and the close icon bearley visible, but first I would like to fix the main problem After I could focus on the small problems I reset the site. Now can be easy visible the problem on less than 700px with . please try with : Aczél Júlianna bottom of the page there are 2 scroll bars. I would like fit to content.

Kevin Powell•2d ago

Ah! I see now, thanks 🙂 I think you'll have to turn off the height: 100vh (though right now that really breaks things) EIther that, or more styling to make each section more independent, and more obviously scrolls

lanszelotOP•2d ago

Thank you for your reply. I do not understand what should I have to do. If I change height to auto on container the site gone, because grid loose height.

Gaming

Programming

Grid question

Did you find this page helpful?