Switcher
---
import Card from "@components/Card.astro";
---
<div class="l-switcher" style="--sw-breakpoint: var(--width-48);">
<Card />
<Card />
<Card />
</div>
//https://every-layout.dev/layouts/switcher/
.l-switcher {
display: flex;
flex-wrap: wrap;
gap: var(--sw-row-gap, var(--sw-gap, var(--vertical-rhythm)))
var(--sw-column-gap, var(--sw-gap, var(--gutter)));
> * {
flex-grow: 1;
flex-basis: calc((var(--sw-breakpoint, var(--width-default)) - 100%) * 999);
}
//limits number of elements to less than 5
> :nth-last-child(n + 5),
> :nth-last-child(n + 5) ~ * {
flex-basis: 100%;
}
}
Use this pattern to create a row of elements that switches to a single column at a specific breakpoint. Useful in instances where the Cluster or Grid are not appropriate. An example would be if you have an odd number of elements.