export default function MultipleColumns() { return ( <> <section className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 md:grid-cols-2"> <div className="h-52 border-4 border-dotted bg-primary-foreground" /> <div className="h-52 border-4 border-dotted bg-primary-foreground" /> </section> <section className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 md:grid-cols-4"> <div className="h-52 border-4 border-dotted bg-primary-foreground" /> <div className="h-52 border-4 border-dotted bg-primary-foreground md:col-span-3" /> </section> <section className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 md:grid-cols-4"> <div className="h-52 border-4 border-dotted bg-primary-foreground md:col-span-3" /> <div className="h-52 border-4 border-dotted bg-primary-foreground" /> </section> <section className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 md:grid-cols-3"> <div className="h-52 border-4 border-dotted bg-primary-foreground" /> <div className="h-52 border-4 border-dotted bg-primary-foreground" /> <div className="h-52 border-4 border-dotted bg-primary-foreground" /> </section> <section className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 md:grid-cols-4"> <div className="h-52 border-4 border-dotted bg-primary-foreground" /> <div className="h-52 border-4 border-dotted bg-primary-foreground" /> <div className="h-52 border-4 border-dotted bg-primary-foreground" /> <div className="h-52 border-4 border-dotted bg-primary-foreground" /> </section> <section className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 md:grid-cols-8"> <div className="h-52 border-4 border-dotted bg-primary-foreground md:col-span-2" /> <div className="h-52 border-4 border-dotted bg-primary-foreground md:col-span-4" /> <div className="h-52 border-4 border-dotted bg-primary-foreground md:col-span-2" /> </section> </> ); }

Containers