Адаптивная сетка CSS с фиксированными строками и максимальным количеством столбцов, но может отображать больше элементов ⇐ CSS

[Anonymous]

Я пытаюсь создать компонент сетки, в котором макет состоит из 2 строк и x столбцов. Количество столбцов может быть не более 6, а элементы сетки являются дочерними элементами неизвестного количества, отсюда и столбцы x.
У меня есть сетка, но я не уверен как обрабатывать последний элемент, поскольку это должна быть кнопка, которая отображает больше элементов сетки при нажатии.
Вот что у меня есть для сетки прямо сейчас:

Код: Выделить всё

const gridOverflowStyles = css`
overflow-y: hidden;
grid-auto-rows: 0;
grid-template-rows: repeat(2, 1fr);
justify-content: space-between;
`;

type GridProps = {
gridItemArr: gridItem[];
}

const Grid = styled.div`
display: grid;
gap: var(--spacing-xs) var(--spacing-2xs);
grid-template-columns: repeat(auto-fit, 170px);

/* a media query function */
${MQ("desktop")} {
grid-template-columns: repeat(auto-fit, 200px);
}

${({ gridItemArr }) =>
gridItemArr.length > 11 && gridOverflowStyles}
`;

А компонент React выглядит примерно так:

Код: Выделить всё

const arr = Array.from(
{ length: 12 },
() => gridItemsArr
);


{arr.map((item, index) => (

))}

При arr.lenght 12 компонент сетки отображает элементы размером 2x6 на всю ширину экрана, но уменьшается до 2x5, 2x4 и 2x3 на меньших экранах, поскольку GridItems имеют фиксированную максимальную ширину и во всех этих различных окнах просмотра последний элемент в сетке должен быть кнопкой, которая разворачивает сетку и отображает все 12 элементов GridItem.
Я использую компонент в стиле Emotion, React и TypeScript.< /p>
Я пробовал искать различные способы использования сетки и нацеливания на ее элементы, но не смог найти решение, которое подходило бы для моей конкретной проблемы. Скорее всего, потому что я младший Frontend-разработчик.

Подробнее здесь: https://stackoverflow.com/questions/783 ... more-items