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 cs-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 cs-grid with a cs-gap-*cs-span-grid to an individual item to make it span every column.
< divclass = " cs-grid" > < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> </ div> Code
Examples
Grids work especially well for card lists and content designed for browsing.
Peony
Paeonia officinalis
Sunflower
Helianthus annuus
< divclass = " cs-grid" > < divclass = " cs-stack cs-gap-s" > < divclass = " cs-frame cs-border-radius-l" > < imgsrc = " https://images.unsplash.com/photo-1520763185298-1b434c919102?q=20" alt = " " /> </ div> < h3class = " cs-heading-m" > </ h3> < em> </ em> </ div> < divclass = " cs-stack cs-gap-s" > < divclass = " cs-frame cs-border-radius-l" > < imgsrc = " https://images.unsplash.com/photo-1591767134492-338e62f7b5a2?q=20" alt = " " /> </ div> < h3class = " cs-heading-m" > </ h3> < em> </ em> </ div> < divclass = " cs-stack cs-gap-s" > < divclass = " cs-frame cs-border-radius-l" > < imgsrc = " https://images.unsplash.com/photo-1590872000386-4348c6393115?q=20" alt = " " /> </ div> < h3class = " cs-heading-m" > </ h3> < em> </ em> </ div> < divclass = " cs-stack cs-gap-s" > < divclass = " cs-frame cs-border-radius-l" > < imgsrc = " https://images.unsplash.com/photo-1516723338795-324c7c33f700?q=20" alt = " " /> </ div> < h3class = " cs-heading-m" > </ h3> < em> </ em> </ div> < divclass = " cs-stack cs-gap-s" > < divclass = " cs-frame cs-border-radius-l" > < imgsrc = " https://images.unsplash.com/photo-1563601841845-74a0a8ab7c8a?q=20" alt = " " /> </ div> < h3class = " cs-heading-m" > </ h3> < em> </ em> </ div> </ div> Code
Population (Zion)
251,999
-3%
Sentinels Controlled
208
+1%
< divclass = " cs-grid" style = " --min-column-size : 30ch; " > < cs-card> < divclass = " cs-flank" > < cs-avatarshape = " rounded" > < cs-iconslot = " icon" name = " public" > </ cs-icon> </ cs-avatar> < divclass = " cs-stack cs-gap-3xs" > < spanclass = " cs-caption-xs" > </ span> < spanclass = " cs-cluster cs-gap-xs" > < spanclass = " cs-heading-2xl" > </ span> < cs-badgevariant = " danger" > < cs-iconname = " trending_down" > </ cs-icon> </ cs-badge> </ span> </ div> </ div> </ cs-card> < cs-card> < divclass = " cs-flank" > < cs-avatarshape = " rounded" > < cs-iconslot = " icon" name = " memory" > </ cs-icon> </ cs-avatar> < divclass = " cs-stack cs-gap-3xs" > < spanclass = " cs-caption-xs" > </ span> < spanclass = " cs-cluster cs-gap-xs" > < spanclass = " cs-heading-2xl" > </ span> < cs-badgevariant = " success" > < cs-iconname = " trending_up" > </ cs-icon> </ cs-badge> </ span> </ div> </ div> </ cs-card> < cs-card> < divclass = " cs-flank" > < cs-avatarshape = " rounded" > < cs-iconslot = " icon" name = " smart_toy" > </ cs-icon> </ cs-avatar> < divclass = " cs-stack cs-gap-3xs" > < spanclass = " cs-caption-xs" > </ span> < spanclass = " cs-cluster cs-gap-xs" > < spanclass = " cs-heading-2xl" > </ span> < cs-badgevariant = " neutral" > < cs-iconname = " remove" > </ cs-icon> </ cs-badge> </ span> </ div> </ div> </ cs-card> < cs-card> < divclass = " cs-flank" > < cs-avatarshape = " rounded" > < cs-iconslot = " icon" name = " raven" > </ cs-icon> </ cs-avatar> < divclass = " cs-stack cs-gap-3xs" > < spanclass = " cs-caption-xs" > </ span> < spanclass = " cs-cluster cs-gap-xs" > < spanclass = " cs-heading-2xl" > </ span> < cs-badgevariant = " success" > < cs-iconname = " trending_up" > </ cs-icon> </ cs-badge> </ span> </ div> </ div> </ cs-card> </ div> < style>
cs-badge > cs-icon {
color : color-mix ( in oklab, currentColor, transparent 40%) ;
}
</ style> Code
Size
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 custom property.
< divclass = " cs-stack" > < divclass = " cs-grid" style = " --min-column-size : 200px; " > < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> </ div> < divclass = " cs-grid" style = " --min-column-size : 6rem; " > < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> </ div> </ div> Code
Gap
By default, the gap between grid items uses --cs-space-m from your theme. Add any cs-gap-*
< divclass = " cs-stack" > < divclass = " cs-grid cs-gap-2xs" > < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> </ div> < divclass = " cs-grid cs-gap-2xl" > < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> < div> </ div> </ div> </ div> Code
Span Grid
You can add cs-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 = " cs-grid" > < div> </ div> < div> </ div> < divclass = " cs-span-grid" > </ div> < div> </ div> < div> </ div> </ div> Code
