Layout COPY-READY COMPONENT

Responsive grid

Responsive two/three-column layout with consistent spacing.

SOURCE INCLUDEDBrowse library

Component studio/ responsive-grid

PREVIEW SOURCE

PreviewINTERACTIVE

Loading Zidom preview…

Try the component here. Changes stay in your browser.

Source codeREAD ONLY / COPY READY

responsive-grid.tsx

TSX

Copy this exact source file into your Zidom project.

responsive-grid.tsx

● Zidom

export default function ResponsiveGrid() {  const items = ['Product', 'Analytics', 'Settings'];  return <div className="zb-responsive-grid">    {items.map((item, index) => <article className="zb-grid-tile">      <span>0{index + 1}</span><strong>{item}</strong>      <p>A reusable responsive layout tile.</p>    </article>)}  </div>;}

responsive-grid.css

CSS

Copy this exact source file into your Zidom project.

responsive-grid.css

● Zidom

.zb-responsive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.zb-grid-tile{padding:18px 15px;background:var(--surface);border:1px solid var(--line);border-radius:11px;min-width:0}.zb-grid-tile span{display:block;font-size:10px;font-weight:800;color:var(--mint)}.zb-grid-tile strong{display:block;margin-top:12px;font-size:15px;color:var(--ink)}.zb-grid-tile p{font-size:12px;line-height:1.55;color:var(--muted);margin-bottom:0}@media(max-width:520px){.zb-responsive-grid{grid-template-columns:1fr}}

YOUR NEXT STEP

Make it yours.

Everything you see above is real Zidom code. Choose a source file, copy it, and adapt it in your project.

Copy the TSX and CSS from their respective tabs. Add both files to your project and import the stylesheet. TypeScript must use jsxImportSource: "@zidomjs/dom" with the Zidom Vite plugin. Setup guide →

← Explore more components Report an issue ↗