Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!-- Flexbox --> <div class="flex items-center justify-between gap-4"> <span class="font-semibold">Logo</span> <nav class="flex gap-2"> <a class="hover:text-indigo-600">Home</a> <a class="hover:text-indigo-600">About</a> </nav> </div> <!-- Flex column, centered --> <div class="flex flex-col items-center justify-center min-h-screen"> <h1 class="text-4xl font-bold">Centered!</h1> </div> <!-- CSS Grid --> <div class="grid grid-cols-12 gap-4"> <aside class="col-span-3 bg-gray-50 p-4">Sidebar</aside> <main class="col-span-9 bg-white p-4">Main content</main> </div> <!-- Grid auto layout --> <div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6"> <!-- Automatically fills columns based on available space --> <div class="bg-white rounded-xl p-4 shadow">Auto card</div> <div class="bg-white rounded-xl p-4 shadow">Auto card</div> <div class="bg-white rounded-xl p-4 shadow">Auto card</div> </div>
Result
Open