Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!-- Basic 3-column grid --> <div class="grid grid-cols-3 gap-6"> <div class="bg-white rounded-xl shadow p-4">Card 1</div> <div class="bg-white rounded-xl shadow p-4">Card 2</div> <div class="bg-white rounded-xl shadow p-4">Card 3</div> </div> <!-- Dashboard layout: sidebar + main + panel --> <div class="grid grid-cols-12 gap-4 min-h-screen p-4"> <aside class="col-span-2 bg-gray-800 text-white rounded-xl p-4">Sidebar</aside> <main class="col-span-7 bg-white rounded-xl p-6">Main content</main> <section class="col-span-3 bg-gray-50 rounded-xl p-4">Right panel</section> </div> <!-- Featured + supporting articles (spanning) --> <div class="grid grid-cols-3 grid-rows-2 gap-4"> <article class="col-span-2 row-span-2 bg-blue-600 text-white rounded-xl p-6"> Featured article </article> <article class="bg-white rounded-xl shadow p-4">Article 2</article> <article class="bg-white rounded-xl shadow p-4">Article 3</article> </div> <!-- Auto-fill fluid grid (no breakpoints needed) --> <div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))"> <!-- or with JIT arbitrary value: --> <!-- <div class="grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-4"> --> <div class="bg-white rounded-xl shadow p-4">Auto card</div> <div class="bg-white rounded-xl shadow p-4">Auto card</div> <div class="bg-white rounded-xl shadow p-4">Auto card</div> </div> <!-- Responsive grid with col-span override --> <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6"> <div class="md:col-span-2 bg-indigo-50 rounded-xl p-6">Wide feature</div> <div class="bg-white rounded-xl shadow p-4">Item</div> <div class="bg-white rounded-xl shadow p-4">Item</div> </div>
Result
Open