Flexbox & Grid Layout

Build modern responsive rows, columns, cards, navigation bars, and galleries.

<style><br /> .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }<br /> .card { padding:24px; background:#102943; color:white; border-radius:14px; }<br /> @media (max-width:600px){ .grid { grid-template-columns:1fr; } }<br /> </style><br /> <div class=”grid”><br /> <div class=”card”>HTML</div><br /> <div class=”card”>CSS</div><br /> <div class=”card”>JavaScript</div><br /> </div>Open Live Preview

Next: JavaScript →