Как сделать каждую ячейку внутри CSS-сетки строго равной ⇐ CSS

[Anonymous]

Мне нужно создать сетку 4x2 и сделать каждую ячейку внутри нее одинаковой по высоте и ширине, и до сих пор я добился определенного успеха, но что бы я ни делал, ячейки растягиваются, когда я помещаю внутрь дочерний элемент немного большего размера. p>
Мне нужно, чтобы мой контейнер-сетка был создан с использованием Grid-template-areas, потому что он динамический.
Вот код контейнера-сетки:

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

export const WidgetsGrid = styled.div'
width: 100%;
height: 100%;
display: grid;
gap: 1rem;
grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Вот как я установил области шаблона сетки

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

Я пробовал редактировать несколько свойств сетки, но поведение остается прежним: оно всегда растягивается, чтобы соответствовать элементу.

Подробнее здесь: https://stackoverflow.com/questions/792 ... ctly-equal