That is not CSS Grid! A true CSS grid would use shorthand notation.

(This is constructive criticism, all mention of CSS Grid is good)

Instead of:

    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

Use the easy to read, maintainable syntax:

    grid-template-columns: repeat(11, 1fr);

The rest of the CSS might as well be 'built with Flex' or 'built with block layout'. It is okay to mix and match but 'as advertised' one expects more Grid-ness to it.

You could build all of it in actual CSS grid with no block/flex layouts, plus the quantity of javascript libraries is a bit excessive for 'grid'. CSS grid assumes an evergreen modern browser so you can use modern javascript without adding in large chunks of stuff that older browsers might need to download.

The CSS definitions on a per-strip basis are also a bit excessive, if you wanted 12 instead of 11 strips then you would need to update a dozen lines of CSS, not so good for whomever maintains the shredder code. Perhaps use javascript there if you want to animate everything?

I wouldn't be posting this comment if I wasn't impressed and a little entertained.