Trying to remove the svg elements while keeping the grid layout intact.
The svgs are used to maintain a 1:1 aspect ratio for all tiles.
UPDATE: Discovered a CSS Solution for this.
Simply set aspect-ratio: 1
for the tiles.
Is there an alternative solution to achieve this without using the svg hack?
body>div {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
min-width: 700px
}
div div {
background: red;
}
<div>
<div><svg viewBox="0 0 1 1"></svg></div>
... (omitted for brevity)
</div>