As of now, my webpage consists of a grid of articles with an absolutely positioned footer. My goal is to make the article grid have a variable number of columns based on the window height. I've considered calculating the distance between the filter bar (located above the article grid) and the footer, then dividing it by the height of each article row. However, I'm struggling to implement this method.
Would appreciate any suggestions or solutions!
Code:
<FilterBar>
<div role="button" onClick={filterArticles} className="work-filter-container">
<input type="checkbox" className={`${checkedFilter ? 'checked' : ''} work-filter`} />
<p>ALLEEN WERK </p>
</div>
<div>
<p>sorteer op</p>
<button
type="button"
id="buttonrecent"
className={activeRecent ? 'active' : ''}
onClick={orderRecent}
>
recent
</button>
<span>/</span>
<button
type="button"
id="buttona-z"
onClick={orderAlphabetical}
className={activeAlphabetical ? 'active' : ''}
>
A - Z
</button>
</div>
</FilterBar>
<div>
<GridWrapper>
{articlesOrder &&
articlesOrder.map(article => {
const data = article.node;
const date = data._meta?.firstPublicationDate;
const formattedDate = dateTimeService.getDate({ dateTime: date });
return (
<Article key={data._meta.id}>
<Link href={`/articles/${data._meta.uid}`}>
<a>
<span>{formattedDate}</span>
<p>{data.title?.[0]?.text}</p>
</a>
</Link>
</Article>
);
})}
<br />
</GridWrapper>
</div>
<Footer position="absolute" textColor="white" />
CSS:
export const GridWrapper = styled.div`
display: flex;
flex-direction: column;
gap: 1.2rem;
width: fit-content;
padding: 0 2.3rem;
@media (${({ theme }) => theme.respondTo.desktop}) {
width: 100vw;
overflow-x: auto;
white-space: nowrap;
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(min(5), 1fr);
}
&::-webkit-scrollbar {
display: none;
}
`;
Below is a screenshot illustrating the issue:
I aim to extend the columns to the footer dynamically, without having a fixed number, depending on the window's height.