#3194
Issues/longbridge/gpui-component/#3194

Feature: add responsive grid component

Openayangwebopened 1mo ago

It would be useful to have a responsive grid component in gpui-kit, similar to [Ant Design Grid](https://ant.design/components/grid).

The main goal is to support breakpoint-based responsive layouts, for example:

  • Automatically adjust the number of columns based on the available width.
  • Support configurable breakpoints.
  • Allow configuring the number of columns / span at different breakpoints.
  • Support horizontal and vertical gaps.
  • Avoid unnecessary empty space when the window size changes.

A typical use case would be displaying cards or other items in a responsive layout where the number of columns automatically changes as the available width changes.

For example:

Large window   → 4 columns
Medium window → 3 columns
Small window  → 2 columns
Very small    → 1 column

It would be great if gpui-kit could provide a reusable Grid component with behavior similar to Ant Design's Row / Col and breakpoint system.

Reference: https://ant.design/components/grid

Activity

1
huacnlee1mo ago

For the card-grid example, GPUI already provides grid()/grid_cols() and container_query to choose the column count from the container's available width. That keeps the layout responsive inside a resizable panel as well as the whole window.

There is no dedicated Row/Col breakpoint component in Kit. The earlier layout discussion in #2967 covers the current direction: container widths rather than a global device-breakpoint system.