📦 display: inline-grid — The Inline Version of CSS Grid

🌐 What is display: inline-grid?

display: inline-grid turns an element into a grid container just likedisplay: grid, but with one difference:it behaves like an inline element. This means the grid participates in inline flow — it sits inline with text or other inline elements.

>>“inline-grid = full Grid power + inline behavior.”

📌 Why Use inline-grid?

  • When you need a grid layout inside inline content
  • When the grid should not take full block width
  • When aligning grid containers horizontally
  • When creating inline badges, buttons, or UI elements using grid

🔍 How inline-grid Behaves

inline-grid:

  • Does NOT start on a new line (unlike display: grid)
  • Only takes up as much width as needed
  • Can sit beside text and other inline elements
  • Still offers full 2D grid layout capability

🧪 Example: Basic inline-grid Setup

Inline Grid Example

.tag {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 6px;
  background: #e2e8f0;
  padding: 6px 10px;
  border-radius: 6px;
}

.tag span {
  background: #cbd5e1;
  padding: 4px 6px;
  border-radius: 4px;
}

This creates a compact inline badge using grid layout.

📐 Visual Behavior Comparison

PropertyBehaves LikeLayout Power
display: gridBlock element (full width)Full 2D Grid
display: inline-gridInline element (flows with text)Full 2D Grid

Note

💡 inline-grid is ideal when you want grid behavior but DO NOT want the element to occupy an entire row of the layout.

🧠 Example: Using inline-grid for Tags or Pills

Tag Pills with inline-grid

.pill {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 6px 12px;
  background: #f1f5f9;
  border-radius: 20px;
}

.icon {
  background: #94a3b8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.text {
  font-size: 14px;
}

Perfect for notifications, badges, or UI labels.

🧩 Example: Aligning Multiple inline-grid Elements

Inline Alignment

.wrapper .box {
  display: inline-grid;
  grid-template-columns: repeat(2, 30px);
  gap: 4px;
  margin-right: 10px;
  background: #e2e8f0;
  padding: 10px;
  border-radius: 6px;
}

All boxes appear inline, side-by-side, because they are inline-level grid containers.

📦 inline-grid + Text Flow

One powerful use of inline-grid is aligning icons with text while maintaining a compact layout.

Icon + Text Alignment

.label {
  display: inline-grid;
  grid-template-columns: 20px auto;
  align-items: center;
  gap: 6px;
}

⚠️ When NOT to Use inline-grid

  • When you need full-width layouts (use grid instead)
  • When stacking large sections vertically
  • When layout alignment requires block-level behavior

Note

⚡ For page-level sections → always prefer display: grid.

🔥 Summary

display: inline-grid brings the full power of CSS Grid into inline flow. It behaves like an inline element but gives you complete 2D layout control — perfect for badges, labels, icon-text components, inline UI elements, and compact structured content.

>>“inline-grid lets you build tiny, beautiful layouts that flow naturally with text.”

Learn more atMDN Docs 📘