Container & Display in Tailwind CSS
From the Tailwind CSS cheat sheet · Layout · verified Jul 2026
Container & Display
Set container width, display type, and visibility.
html
<!-- Container — centers and max-widths content -->
<div class="container mx-auto px-4">...</div>
<!-- Display -->
<div class="block">Block</div>
<span class="inline-block">Inline block</span>
<div class="hidden">Hidden</div>
<div class="flex">Flex container</div>
<div class="grid">Grid container</div>💡 hidden sets display:none; invisible sets visibility:hidden (keeps layout space)
⚡ Use columns-2/3 for magazine-style multi-column text flow
📌 overflow-auto only shows scrollbars when content overflows; scroll always shows them
🟢 container + mx-auto + px-4 is the standard centered layout pattern
containerdisplayoverflowcolumns
Continue with Tailwind CSS
Save the full cheat sheet or work through every related task.