Grid's responsive column counts use Tailwind breakpoints (`md:grid-cols-3`), which respond to the viewport width. When the Grid is inside a sidebar layout (like the Mintlify docs panel, which loses ~300px to the sidebar), the breakpoints fire at the wrong size — you get 3 columns when there's only room for 2.
`min_column_width` works around this since CSS Grid's `auto-fit` responds to the actual container, but the explicit breakpoint syntax (`columns={"default": 1, "md": 3}`) is misleading.
Options:
- Document the limitation and recommend `min_column_width` for embedded contexts
- Investigate CSS container queries (`@container`) as an alternative to viewport media queries
- Both
Grid's responsive column counts use Tailwind breakpoints (`md:grid-cols-3`), which respond to the viewport width. When the Grid is inside a sidebar layout (like the Mintlify docs panel, which loses ~300px to the sidebar), the breakpoints fire at the wrong size — you get 3 columns when there's only room for 2.
`min_column_width` works around this since CSS Grid's `auto-fit` responds to the actual container, but the explicit breakpoint syntax (`columns={"default": 1, "md": 3}`) is misleading.
Options: