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%;
}
}