CSS Utilities
Grid
Grid
A grid places its children in evenly-sized columns that shrink, grow, and reflow as the container resizes, without any breakpoints to manage. Drop any number of items into wa-grid and the utility figures out how many fit on each row based on the container's width and the minimum column size you've asked for. It's the quickest way to build card galleries, product listings, dashboards, and any content that should adapt from one column on a phone to several on a desktop.
Set --min-column-size to change the threshold at which items start to wrap, pair wa-grid with a wa-gap-*wa-span-grid to an individual item to make it span every column.
< divclass = " wa-grid" > < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> </ div>
Code
Examples
Link to This Section
Grids work especially well for card lists and content designed for browsing.
Peony
Paeonia officinalis
Sunflower
Helianthus annuus
< divclass = " wa-grid" > < divclass = " wa-stack wa-gap-s" > < divclass = " wa-frame wa-border-radius-l" > < imgsrc = " https://images.unsplash.com/photo-1520763185298-1b434c919102?q=20" alt = " " /> </ div> < h3class = " wa-heading-m" > </ h3> < em> </ em> </ div> < divclass = " wa-stack wa-gap-s" > < divclass = " wa-frame wa-border-radius-l" > < imgsrc = " https://images.unsplash.com/photo-1591767134492-338e62f7b5a2?q=20" alt = " " /> </ div> < h3class = " wa-heading-m" > </ h3> < em> </ em> </ div> < divclass = " wa-stack wa-gap-s" > < divclass = " wa-frame wa-border-radius-l" > < imgsrc = " https://images.unsplash.com/photo-1590872000386-4348c6393115?q=20" alt = " " /> </ div> < h3class = " wa-heading-m" > </ h3> < em> </ em> </ div> < divclass = " wa-stack wa-gap-s" > < divclass = " wa-frame wa-border-radius-l" > < imgsrc = " https://images.unsplash.com/photo-1516723338795-324c7c33f700?q=20" alt = " " /> </ div> < h3class = " wa-heading-m" > </ h3> < em> </ em> </ div> < divclass = " wa-stack wa-gap-s" > < divclass = " wa-frame wa-border-radius-l" > < imgsrc = " https://images.unsplash.com/photo-1563601841845-74a0a8ab7c8a?q=20" alt = " " /> </ div> < h3class = " wa-heading-m" > </ h3> < em> </ em> </ div> </ div>
Code
Population (Zion)
251,999
-3%
Sentinels Controlled
208
+1%
< divclass = " wa-grid" style = " --min-column-size : 30ch; " > < wa-card> < divclass = " wa-flank" > < wa-avatarshape = " rounded" > < wa-iconslot = " icon" name = " globe" > </ wa-icon> </ wa-avatar> < divclass = " wa-stack wa-gap-3xs" > < spanclass = " wa-caption-xs" > </ span> < spanclass = " wa-cluster wa-gap-xs" > < spanclass = " wa-heading-2xl" > </ span> < wa-badgevariant = " danger" > < wa-iconname = " arrow-trend-down" > </ wa-icon> </ wa-badge> </ span> </ div> </ div> </ wa-card> < wa-card> < divclass = " wa-flank" > < wa-avatarshape = " rounded" > < wa-iconslot = " icon" name = " microchip" > </ wa-icon> </ wa-avatar> < divclass = " wa-stack wa-gap-3xs" > < spanclass = " wa-caption-xs" > </ span> < spanclass = " wa-cluster wa-gap-xs" > < spanclass = " wa-heading-2xl" > </ span> < wa-badgevariant = " success" > < wa-iconname = " arrow-trend-up" > </ wa-icon> </ wa-badge> </ span> </ div> </ div> </ wa-card> < wa-card> < divclass = " wa-flank" > < wa-avatarshape = " rounded" > < wa-iconslot = " icon" name = " robot" > </ wa-icon> </ wa-avatar> < divclass = " wa-stack wa-gap-3xs" > < spanclass = " wa-caption-xs" > </ span> < spanclass = " wa-cluster wa-gap-xs" > < spanclass = " wa-heading-2xl" > </ span> < wa-badgevariant = " neutral" > < wa-iconname = " minus" > </ wa-icon> </ wa-badge> </ span> </ div> </ div> </ wa-card> < wa-card> < divclass = " wa-flank" > < wa-avatarshape = " rounded" > < wa-iconslot = " icon" name = " spaghetti-monster-flying" > </ wa-icon> </ wa-avatar> < divclass = " wa-stack wa-gap-3xs" > < spanclass = " wa-caption-xs" > </ span> < spanclass = " wa-cluster wa-gap-xs" > < spanclass = " wa-heading-2xl" > </ span> < wa-badgevariant = " success" > < wa-iconname = " arrow-trend-up" > </ wa-icon> </ wa-badge> </ span> </ div> </ div> </ wa-card> </ div> < style>
wa-badge > wa-icon {
color : color-mix ( in oklab, currentColor, transparent 40%) ;
}
</ style>
Code
Sizing
Link to This Section
By default, grid items will wrap when the grid's column size is less than 20ch, but you can set a custom minimum column size using the --min-column-size property.
< divclass = " wa-stack" > < divclass = " wa-grid" style = " --min-column-size : 200px; " > < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> </ div> < divclass = " wa-grid" style = " --min-column-size : 6rem; " > < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> </ div> </ div>
Code
Gap
Link to This Section
By default, the gap between grid items uses --wa-space-m from your theme. You can add any of the following wa-gap-*wa-grid to specify the gap between items:
wa-gap-0wa-gap-3xswa-gap-2xswa-gap-xswa-gap-swa-gap-mwa-gap-lwa-gap-xlwa-gap-2xlwa-gap-3xl
< divclass = " wa-stack" > < divclass = " wa-grid wa-gap-2xs" > < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> </ div> < divclass = " wa-grid wa-gap-2xl" > < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> </ div> </ div>
Code
Span Grid
Link to This Section
You can add wa-span-grid to any grid item to allow it to span all grid columns. With this, the grid item occupies its own grid row.
< divclass = " wa-grid" > < div> </ div> < div> </ div> < divclass = " wa-span-grid" > </ div> < div> </ div> < div> </ div> </ div>
Code
