Динамическое количество столбцов сетки 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;
  }
`;

Скрин проблемы ниже:

Я хочу, чтобы в результате столбцы шли до нижнего колонтитула без фиксированной суммы, например динамической суммы, основанной на высоте окна.

enter image description here

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
1
0
34
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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;

Micah C 17.05.2022 15:16

Даже не думал об этом, но это также хороший способ сделать это.

Mauro 17.05.2022 16:03

Другие вопросы по теме