CSS resizing issue with grid layout

Question

I have a grid on my page but it doesn't seem to be doing what I'm asking of it (as usual haha). There are two main issues which I can't seem to solve.

Number 1: The right side of the grid (recent articles) seems to take up too much space. Ideally I'd want the grid to be centred so both halves are equal sizes

Number 2: When resizing, the left part of the grid gets compressed while the right side doesn't. If possible I'd like the left side to stay constant and have the right side of the 'recent articles' list be compressed

The code used is here:

HTML:

 <div class="homepage">
            <div class="topics">
                <div class="homepage-topics-title">
                    Explore some topics:
                </div>
                <div class="individual-topics">
                    <a href="/productivity" class="topic1">Productivity</a>
                    <a href="/orginisation" class="topic2">Orginisation</a>
                    <a href="/time-management" class="topic3">Time-Management</a>
                </div>
            </div>
            <div class="recent">
                <div class="homepage-recent-title">
                    Recent articles
                </div>
                <div class="hompage-recent-articles">
                    {{{body}}}
                </div>
            </div>
        </div>

CSS:

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex-grow: 1;
    padding: 6rem 0;
}

@media (max-width: 767px) {
    .site-content {
        padding: 3rem 0;
    }
}


/* Homepage code */
.homepage{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 3rem;
}

.homepage-recent-title{
    font-size: 3rem;
    position: relative;
    align-self: center;
    overflow: hidden;
    padding-left: 3rem;
    line-height: 1;
}

.homepage-topics-title{
    font-size: 3rem;
    position: relative;
    align-self: center;
    overflow: hidden;
    margin-left: 3rem;
    line-height: 1;
}

.individual-topics{
    position: relative;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 5rem;
    padding-right: 50%;
    font-size: 1.6rem;
    font-weight: 400;
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 3;
}

Answer 1

If you adjust you grid-template-columns , I think you get what you need.

/* Homepage code */
.homepage{
    display: grid;
    grid-template-columns: min-content 1fr;
    margin-top: 3rem;
}

 .site { display: flex; flex-direction: column; min-height: 100vh; } .site-content { flex-grow: 1; padding: 6rem 0; } @media (max-width: 767px) { .site-content { padding: 3rem 0; } } /* Homepage code */ .homepage { display: grid; grid-template-columns: min-content 1fr; margin-top: 3rem; } .homepage-recent-title { font-size: 3rem; position: relative; align-self: center; overflow: hidden; padding-left: 3rem; line-height: 1; } .homepage-topics-title { font-size: 3rem; position: relative; align-self: center; overflow: hidden; margin-left: 3rem; line-height: 1; } .individual-topics { position: relative; display: grid; grid-template-rows: 1fr 1fr 1fr; padding-top: 1.5rem; padding-bottom: 1.5rem; padding-left: 5rem; padding-right: 50%; font-size: 1.6rem; font-weight: 400; align-items: center; text-overflow: ellipsis; white-space: nowrap; line-height: 3; }

 <div class="homepage"> <div class="topics"> <div class="homepage-topics-title"> Explore some topics: </div> <div class="individual-topics"> <a href="/productivity" class="topic1">Productivity</a> <a href="/orginisation" class="topic2">Orginisation</a> <a href="/time-management" class="topic3">Time-Management</a> </div> </div> <div class="recent"> <div class="homepage-recent-title"> Recent articles </div> <div class="hompage-recent-articles"> {{{body}}} </div> </div> </div>