31 replies

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;
    }

.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;
    }

.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 ?

Grid question

Similar Threads

Similar Threads

Similar Threads