The Complete CSS Display Inline-Grid Interactive Tutorial

What is CSS display: inline-grid?

display: inline-grid makes an element behave like a grid container on the inside (its children become grid items), while the element itself behaves like an inline-level box in the surrounding layout.

If that sounds like “two personalities in one element”, that’s… pretty accurate. The “grid” part controls how children are placed. The “inline” part controls how the container participates in text flow, wrapping, and alignment with other inline content.

• Inside: grid layout for children (columns, rows, gaps, alignment).
• Outside: inline-level behavior (sits in a line of text, can wrap with text, aligns to baselines).

Inline-grid vs grid: same grid, different outer behavior

display: grid creates a block-level grid container: it starts on a new line and (by default) stretches to fill the available inline space.

display: inline-grid creates an inline-level grid container: it can sit next to text and other inline elements, and it usually sizes more “hug-the-content” unless you force a width.

.demo {
  display: grid;
}
  

.demo {
  display: inline-grid;
}
  

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-monospace, SFMono-Regular, monospace;
  padding: 16px;
  line-height: 1.5;
}

.demo {
  grid-template-columns: repeat(3, 80px);
  gap: 10px;
  padding: 10px;
  border: 3px solid #111;
  background: #f2f2f2;
  margin: 10px 0;
}

.demo > div {
  display: grid;
  place-items: center;
  border: 2px solid #111;
  background: white;
  height: 60px;
}

.note {
  max-width: 60ch;
}
  

  

    Click the snippets. Notice how grid takes a full line (block-like), while inline-grid behaves more like a big “word” that can sit inline.
  

    Before the grid container.
    Before the grid container:

  

    
1
    
2
    
3
    
4
    
5
    
6
  

    More text after the grid container.

  

Inline-grid in text flow: it flows like text

The most important mental model: inline-grid is an inline-level box. That means it can sit inside a paragraph, alongside words, icons, and buttons.

Inline-level boxes also have fun quirks:

• They align to a baseline by default, so they might look slightly “dropped” compared to surrounding text.
• They can wrap with text (depending on available space), like a long word.
• Properties like vertical-align matter for inline-level alignment.

.tag {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 8px;
  padding: 6px 10px;
  border: 2px solid #111;
  background: #f2f2f2;
  vertical-align: baseline;
}
  

.tag {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 8px;
  padding: 6px 10px;
  border: 2px solid #111;
  background: #f2f2f2;
  vertical-align: middle;
}
  

.tag {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 8px;
  padding: 6px 10px;
  border: 2px solid #111;
  background: #f2f2f2;
  vertical-align: top;
}
  

*,
::before,
::after {
  box-sizing: border-box;
}

.p {
  font-family: system-ui, -apple-system, sans-serif;
  padding: 18px;
  line-height: 1.8;
  max-width: 68ch;
}

.dot {
  width: 10px;
  height: 10px;
  border: 2px solid #111;
  border-radius: 99px;
  background: white;
}

.label {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.big {
  font-size: 22px;
  font-weight: 800;
}

.helper {
  display: inline-block;
  padding: 2px 6px;
  border: 2px dashed #111;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
}
  

  Text baseline
  Big
  
    
    inline-grid tag
  
  Text
  Try vertical-align

  

Why vertical-align matters for inline-grid

Many people learn vertical-align and think “that’s for images”. True… and also for inline-level boxes like inline-block and inline-grid.

When your inline-grid sits next to text, vertical-align: middle is often the quick fix that makes the UI look “centered” in the line.

Learn more about vertical-align in the CSS Vertical Align Interactive Tutorial.

Sizing: shrink-to-fit (and why inline-grid feels “content-sized”)

Block-level display: grid elements usually stretch to fill the line (like normal blocks). Inline-level display: inline-grid often behaves more like “wrap tightly around my content”.

This is a superpower for UI bits like chips, inline cards, and icon+label combos. But it can surprise you if you expected the container to be full-width.

.card {
  display: inline-grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
}
  

.card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
}
  

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: system-ui, -apple-system, sans-serif;
  padding: 16px;
  max-width: 78ch;
}

.shell {
  border: 3px solid #111;
  padding: 14px;
  background: #f2f2f2;
}

.card {
  align-items: center;
  padding: 12px;
  border: 3px solid #111;
  background: #fff;
}

.avatar {
  width: 44px;
  height: 44px;
  border: 3px solid #111;
  border-radius: 999px;
  overflow: hidden;
  background: #ddd;
}

.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.title {
  font-weight: 800;
}

.meta {
  opacity: 0.8;
  font-size: 14px;
}

.note {
  margin: 10px 0 0 0;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
}
  

  

    

      

        
      
      

        
Inline UI Card
        
Try switching inline-grid vs grid
      
    
    

      Tip: grid (block) typically stretches; inline-grid typically hugs content unless you set a width.
    
  

  

Making inline-grid fill available space (when you want it to)

If you want the element to still be inline-level but occupy a particular width, you can set width. You can even use width: 100% (although at that point, it behaves a lot like a block in practice).

• Use inline-grid when you want it to participate in inline flow.
• Use grid when it should behave like a normal block layout section.
• Set width explicitly when you need predictable sizing.

Spacing inside inline-grid: gap and alignment

Once you’re a grid container, you get grid goodies: gap, align-items, justify-items, place-items, auto-placement, and more.

In many UI components, you’ll use grid to line up an icon + text + badge with consistent spacing. Let’s make the spacing interactive with a slider.

.pill {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 3px solid #111;
  background: #f2f2f2;
  border-radius: 999px;
}
  

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: system-ui, -apple-system, sans-serif;
  padding: 18px;
  line-height: 1.6;
}

.icon {
  width: 18px;
  height: 18px;
  border: 2px solid #111;
  border-radius: 4px;
  background: #fff;
}

.text {
  font-weight: 800;
}

.badge {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  padding: 2px 8px;
  border: 2px solid #111;
  background: #fff;
  border-radius: 999px;
}
  

    This “pill” is an inline-grid.
    It sits inline, but internally it uses grid spacing.

    
      
      Notifications
      12
    
    and here is more text right after it.

  

Interactive alignment: align-items

Grid alignment can be confusing at first, so here’s a simple rule:

• align-items aligns items on the block axis (usually vertical).
• justify-items aligns items on the inline axis (usually horizontal).

.panel {
  display: inline-grid;
  grid-template-columns: 60px 60px 60px;
  grid-auto-rows: 70px;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 3px solid #111;
  background: #f2f2f2;
}
  

*, ::before, ::after {
  box-sizing: border-box;
}
.wrap {
  padding: 18px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.cell {
  border: 2px solid #111;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.cell.tall {
  height: 46px;
}
.cell.short {
  height: 24px;
}
  

  

    The container is inline-grid, so it can sit inline.
    The radios change align-items on the grid container.
  

  

    Text before
    
      A
      B
      C
      D
      E
      F
    
    text after
  

  

A practical pattern: inline-grid mini gallery

Inline-grid is great when you want a compact “component” that doesn’t automatically become full-width. A classic example: a tiny image gallery that can sit inside a paragraph or next to other inline content.

.gallery {
  display: inline-grid;
  grid-template-columns: repeat(3, 70px);
  gap: 8px;
  padding: 8px;
  border: 3px solid #111;
  background: #f2f2f2;
  vertical-align: middle;
}
.gallery img {
  width: 70px;
  height: 50px;
  object-fit: cover;
  display: block;
  border: 2px solid #111;
}
  

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: system-ui, -apple-system, sans-serif;
  padding: 18px;
  line-height: 1.7;
  max-width: 80ch;
}

.kbd {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  border: 2px solid #111;
  background: #fff;
  padding: 2px 6px;
}
  

  

    You can drop this gallery right inside text.
    It aligns nicely with vertical-align: middle.
  

  

    Here comes the gallery:
    
      
      
      
      
      
      
    
    and the sentence continues after it.
  

  

Common inline-grid gotchas (and how to fix them)

“My inline-grid is not centered next to text”

Use vertical-align on the inline-grid element: middle is a common choice for UI chips and icons.

• Try: vertical-align: middle;
• Or: vertical-align: top; if you want it to sit higher.

“My inline-grid does not take full width”

That’s the “inline” part working as designed. If you want full width, either:

• Switch to display: grid, or
• Keep inline-grid but set width: 100%; (or a fixed/max width).

“Why does it wrap like a word?”

Inline-level boxes participate in line wrapping. If there isn’t enough horizontal space, the line breaks before or after the inline-grid (depending on layout).

If you’re building a chip/button and you never want it to break across lines, consider:

• Keeping the internal layout compact (smaller columns / less padding), and
• Using white-space: nowrap; on the surrounding text or on the component when appropriate.

“Do grid properties work the same inside inline-grid?”

Yes. Once an element is a grid container (grid or inline-grid), the grid rules for children are the same: tracks, gaps, auto-placement, alignment, and so on.

Inline-grid cheat sheet

• Use display: inline-grid when you want grid layout inside a component that should still flow inline with text.
• Use display: grid when the grid container should behave like a block section and typically fill the available width.
• If alignment looks off next to text, try vertical-align: middle.
• If it’s “too narrow”, set a width (or switch to block-level grid).
• gap, align-items, and justify-items are your daily drivers for clean UI spacing.

CSS Display Inline-Grid Conclusion

display: inline-grid is a powerful tool for creating compact, inline-friendly grid layouts. It combines the layout capabilities of grid with the flow and alignment behavior of inline elements.

Learn more about grid in general in the CSS Grid Interactive Tutorial.