Esther on Nostr: Here's a shortcoming of CSS Grid: As far as I can see there's no way to have grid ...

Here's a shortcoming of CSS Grid:

As far as I can see there's no way to have grid cells that are perfectly square without using aspect-ratio: 1 on the grid's child elements.

This becomes relevant when you have some grid elements that span a different number of cells in each direction.

This is the hack I'm now using to get around this but it requires knowing how many vertical grid rows you'll need (defined in the --nrows variable) and also all the horizontal spacings in your layout.

display: grid;
--cell: calc((100vw - 14rem - 11 * 1rem) / 12);
grid-template-columns: repeat(12, var(--cell));
grid-template-rows: repeat(var(--nrows), var(--cell));
grid-gap: 1rem;


(the 14rem there is the sum of all horizontal spacings outside of this grid)

#CSS #WebDev #WebDesign