Why does CSS grid distort my SVG?

A 1fr cell with both axes stretched can force the SVG box. This tool sets meet and centers the item so the cell no longer squash-scales the art.

How is grid distortion different from flexbox stretching?

Grid uses tracks and justify-self/align-self. Flexbox uses flex-shrink. Use the matching page for the parent you actually have.

No. For objectBoundingBox gradients in a grid, use Fix SVG Gradient Stretch in CSS Grid.

Yes — meet letterboxes. Slice would crop. This page chooses meet so nothing is clipped.

FAQ

Quick answers

Why does CSS grid distort my SVG?: A 1fr cell with both axes stretched can force the SVG box. This tool sets meet and centers the item so the cell no longer squash-scales the art.
How is grid distortion different from flexbox stretching?: Grid uses tracks and justify-self/align-self. Flexbox uses flex-shrink. Use the matching page for the parent you actually have.
Does prevent-distortion change gradientUnits?: No. For objectBoundingBox gradients in a grid, use Fix SVG Gradient Stretch in CSS Grid.
Can I still fill the cell without distortion?: Yes — meet letterboxes. Slice would crop. This page chooses meet so nothing is clipped.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B