Display: Block, Inline, Flex, Grid

Tailwind CSS gives you full control over how elements are displayed using display utility classes. You can toggle between block-level and inline-level displays, or use layout modes like flexbox and grid effortlessly.

1. Block and Inline Display

Control whether elements behave like block or inline elements:

<div class="block">Block-level element</div>
<span class="inline">Inline element</span>
<div class="inline-block">Inline Block Element</div>

2. Flex Display

Enable flexbox layout using flex:

<div class="flex space-x-4">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Use additional flex utilities to control direction, alignment, and spacing.

3. Grid Display

Activate CSS Grid layout with grid class:

<div class="grid grid-cols-3 gap-4">
    <div>Grid 1</div>
    <div>Grid 2</div>
    <div>Grid 3</div>
</div>

You can define columns, rows, and gaps using additional grid utilities.

4. Other Display Utilities

hidden – Completely hides an element.
table, table-row, table-cell – Table-based layouts.
contents – Makes children act as if the parent doesn't exist (great with pseudo-elements).
list-item – Forces element to behave like a list item.

Conclusion

Tailwind’s display utilities make it simple to switch between layout modes. Whether you're working with basic inline/block layouts or advanced flex and grid systems, it's all one class away.

← Previous: Widths, Heights, Max/Min Sizing Next: Float, Clear, Overflow, Object Fit →