🧩 CSS Tutorial: display

📌 Introduction

The display property is one of the most important layout properties in CSS. It determines **how an element appears in the document flow** — whether it behaves like a block, inline element, flex container, grid container, or even disappears visually while remaining in the DOM. Understanding display is essential for mastering layout systems in modern web development. ✨

🎯 What Does display Do?

  • Defines how an element participates in layout
  • Controls block/inline behavior
  • Makes elements flex or grid containers
  • Enables table-like layouts
  • Can hide elements visually without removing them from the DOM

✨ Syntax

Syntax

selector {
  display: <value>;
}

🧱 Core Display Values

1. display: block

Element takes full width and starts on a new line.

Code Snippet

div { display: block; }

2. display: inline

Element stays in the same line; width/height cannot be applied.

Code Snippet

span { display: inline; }

3. display: inline-block

Inline-level element that allows width & height. Best for buttons and small UI components.

Code Snippet

button { display: inline-block; }

4. display: none

Completely hides the element (not in layout, no space reserved).

Code Snippet

.hidden { display: none; }

Note

Use visibility: hidden if you want to hide the element but keep the space.

🎛️ Modern Layout Display Values

5. display: flex

Makes the element a flex container — perfect for 1D layouts (rows/columns).

Code Snippet

.row {
  display: flex;
  gap: 1rem;
}

6. display: inline-flex

Behaves like flex container but inline-level.

Code Snippet

.tag { display: inline-flex; }

7. display: grid

Makes the element a grid container — ideal for 2D layouts.

Code Snippet

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

8. display: inline-grid

Grid container that behaves inline.

Code Snippet

.icon-grid { display: inline-grid; }

🧩 Table Display Values

  • table
  • table-row
  • table-cell

Table Example

.row { display: table-row; }
.cell { display: table-cell; }

🧩 Special Display Values

9. display: contents

Makes the element disappear visually but keeps its children and their layout participation. Useful in styling nested structures.

Code Snippet

.wrapper { display: contents; }

10. display: list-item

Creates a list item with a marker (like <li>).

Code Snippet

.custom-list { display: list-item; }

11. display: flow-root

Creates a new block formatting context (BFC), fixing float issues.

Code Snippet

.flow {
  display: flow-root;
}

12. display: run-in

Rarely used. Behaves like inline or block based on context.

Code Snippet

.run { display: run-in; }

🔥 Practical Examples

1. Flexbox Navigation

Code Snippet

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

2. Gallery Layout With Grid

Code Snippet

.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

3. Hide Element Completely

Code Snippet

.sidebar { display: none; }

4. Inline Button With Custom Size

Code Snippet

.btn {
  display: inline-block;
  padding: 10px 20px;
}

5. Display Contents (for design systems)

Code Snippet

.layout-wrapper {
  display: contents;
}

📊 Summary Table

Display ValueDescription
blockStarts new line, full width
inlineSame line, no width/height control
inline-blockInline element with block sizing
flex1D flexible layout
grid2D grid layout
noneRemoves element from layout
contentsDisappears but keeps children layouts
flow-rootCreates new block formatting context

🧠 Tips & Best Practices

  • Use flex for navbar, cards, lists
  • Use grid for image galleries, dashboards
  • Use inline-block for buttons
  • Use none only when hiding element intentionally
  • Avoid mixing flex and grid in the same container
>>“Master the display property, and you master the foundation of CSS layout.” ✨

🎉 Conclusion

The display property is the building block of CSS layout. From basic inline and block behavior to advanced layout systems like Flexbox and Grid, mastering display means mastering layout itself. Use it to structure UI, build complex components, and take full control of how elements behave on the page. 🚀