Динамическое количество столбцов сетки css
прямо сейчас у меня есть страница с сеткой статей и нижним колонтитулом с абсолютным позиционированием. Я пытаюсь добиться того, чтобы сетка статей имела динамическое количество столбцов в зависимости от высоты вашего окна. Я подумал о том, чтобы рассчитать расстояние между панелью фильтров (над сеткой статей) и нижним колонтитулом и разделить его на каждый из высота строки статьи, но я просто не могу понять, как это сделать.
У кого-нибудь есть идея?
Код:
<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;
}
`;
Скрин проблемы ниже:
Я хочу, чтобы в результате столбцы шли до нижнего колонтитула без фиксированной суммы, например динамической суммы, основанной на высоте окна.
Ответы 1
Что вы можете сделать, чтобы решить эту проблему
Сначала вам нужно выяснить window.innerHeight, где один столбец подходит правильно, затем вы увеличиваете высоту экрана с помощью своих элементов проверки, устанавливаете его как отзывчивый и смотрите, на какой высоте два столбца подходят правильно, например, подходит ли один столбец лучше всего на 500 пикселей window.innerHeight и два столбца по 530 пикселей, то вы знаете, что каждые 30 пикселей, которые добавляются к вашему innerHeight, количество столбцов должно увеличиваться на 1.
Сначала вы должны использовать React useState, чтобы отслеживать количество столбцов.
const [columnsAmount, setColumnsAmount] = useState();
Со всей приведенной выше информацией вы можете создать цикл for, который будет выглядеть примерно так:
useEffect(() => {
let columns = 1;
for (let i = 500; i < window.innerHeight; i += 30) {
columns += 1;
}
setColumnsAmount(columns);
}, []);
Даже не думал об этом, но это также хороший способ сделать это.
Вместо того, чтобы запускать цикл, сделайте математику.
let extraWidth = window.innerHeight - 500; let columns = 1 + (extraWidth - extraWidth % 30) / 30;