The astro-island
and astro-slot
selectors help to alleviate styling frustrations when using Astro.
.grid-simple { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap)); max-width: 100%;
> *, > *:where(.contents) > *, > *:where(astro-island, astro-slot) > * { grid-column: var(--colstart) / span var(--span); grid-row: var(--rowstart) / span var(--rowspan); max-width: 100%; }}