Grid
Arrange elements in a grid structure.
The <Grid> component is a versatile tool to arrange child elements within a two-dimensional grid structure (CSS Grid).
Usage
<Grid> allows full control over columns and rows sizes, spacing between children, and the overall height. It is highly customizable, so that the <Grid> can be used optimally for complex layouts.
One of the benefits of using <Grid> is that its associated component, <Grid.Area>, don't need to be arranged in any specific order. They will be automatically positioned based on their name prop. If you'd like to understand more about how grid template areas function, you can find a detailed article here.
Holy Grail
Below you find an example demonstrating how to create the holy grail layout using the <Grid> component below. It is useful if you need easy vertical and horizontal alignment of content while staying responsive.
import { Grid } from '@marigold/components';import { Rectangle } from '@/ui/Rectangle';export default () => ( <Grid areas={['header header', 'sidebar main', 'footer footer']} columns={[1, 4]} rows={['80px', 'auto', '80px']} height={80} space={1} > <Grid.Area name="header"> <Rectangle height="100%"> <div className="text-text-primary-muted m-auto">Header</div> </Rectangle> </Grid.Area> <Grid.Area name="sidebar"> <Rectangle height="100%"> <div className="text-text-primary-muted m-auto">Sidebar</div> </Rectangle> </Grid.Area> <Grid.Area name="main"> <Rectangle height="100%"> <div className="text-text-primary-muted m-auto">Main</div> </Rectangle> </Grid.Area> <Grid.Area name="footer"> <Rectangle height="100%"> <div className="text-text-primary-muted m-auto">Footer</div> </Rectangle> </Grid.Area> </Grid>);Bento
The <Grid> component can also be used to create bento layouts. Here is an example for a more complex grid, where every element has its own dimensions.
import { Grid } from '@marigold/components';import { cn } from '@marigold/system';const Teaser = ({ className, src, alt,}: { className?: string; src: string; alt: string;}) => ( <img className={cn( 'size-full rounded-2xl object-cover object-center drop-shadow-lg', className )} alt={alt} src={src} />);export default () => ( <Grid areas={[ 'event-1 event-1 mobile-ticket', 'logo logo mobile-ticket', 'logo logo tickets', 'social-media event-2 tickets', ]} columns={[3, 2, 3]} rows={['160px', '60px', '40px', '100px']} space={4} > <Grid.Area name="event-1"> <Teaser alt="crowd surfing" src="https://www.reservix.net/app/uploads/2023/08/shutterstock_2134745259.jpg" /> </Grid.Area> <Grid.Area name="mobile-ticket"> <Teaser alt="mobile ticket" src="https://www.reservix.net/app/uploads/resized/2023/12/Zusammenarbeit-RX-Mobilticket-1000x667-231201-1000x750-c-center.jpg" /> </Grid.Area> <Grid.Area name="logo"> <Teaser className="bg-black object-scale-down" alt="logo" src="https://www.reservix.net/app/themes/friendventure-reservix/dist/components/BasisFooter/Assets/reservix-logo-fbb6448c90.svg" /> </Grid.Area> <Grid.Area name="social-media"> <Teaser className="object-none object-left-top" alt="social media" src="https://www.reservix.net/app/uploads/resized/2023/12/Marketing-Expertise-collage-V2-1000x750-c-center.png" /> </Grid.Area> <Grid.Area name="event-2"> <Teaser alt="artist from back" src="https://cdn.pressebox.de/f/f3ebdc8b4e5375b5/attachments/1451457.attachment" /> </Grid.Area> <Grid.Area name="tickets"> <Teaser alt="tickets" src="https://www.reservix.net/app/uploads/resized/2023/11/tickets_reservix-1-1000x750-c-center.jpg" /> </Grid.Area> </Grid>);Props
Grid
Prop
Type
Grid.Area
Prop
Type
Alternative components
Since the <Grid> component should be used when you need to create more complex layouts, the following components can can help you if you need simpler layout structures.
- Tiles: With
<Tiles>you have the possibility to create equal wide elements in a grid system. - Columns: If you need to have elements placed in one line.