`SectionGrid` item size huge with one or two items

[bradleyburgess]

Describe the bug or issue

If there are only one or two items inside SectionGrid, the items expand to fill the entire available space because of auto-fit. I don't believe this is the desired effect, as if there is one item it is gigantic.

I updated my local SectionGrid to use auto-fill instead of auto-fit, and I believe this is a more desirable result.

// src/components/ui/section/section-grid.astro

const variants = cva("grid w-full gap-6", {
  variants: {
    frame: {
      default: "",
    },
    size: {
      sm: "grid-cols-[repeat(auto-fill,minmax(200px,1fr))]",
      default: "grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(260px,1fr))]",
      lg: "grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(400px,1fr))]",
      xl: "grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(600px,1fr))]",
    },
  },
  defaultVariants: {
    size: "default",
    frame: "default",
  },
});

This way, if there is one item, it won't grow to fit the entire available width; it will remain contained inside, not growing beyond the max size declared with minmax.

Happy to do a PR if this is agreeable.

---

Before (currently, with auto-fit):

After (with auto-fill):

For context, the layout with more items:

[silveltman]

@bradleyburgess Yea, its not ideal. However, this component will be deprecated in upcoming v0.9, since these days its better to just let agents build grids than using abstraction layers like this.

Using auto-fill instead of auto-fit is indeed the solution in some cases, but in other situations its the other way around.

[silveltman]

Now im thinking about it, I might introduce a TileGroup component which would replace the SectionGrid. Not that its the same in each project, but having a bit of consistency within the same project might be nice, the ItemGroup comp can be edited anyways on a per project bases.

Will keep this open

[bradleyburgess]

Thanks. That makes sense. I like the SectionGrid component in general, so will be sad to see it go. If you weren't deprecating it, I would propose maybe having a fill mode prop, to use either auto-fit or auto-fill. (Your point is well taken that -fit is sometimes the better choice.)

[silveltman]

@bradleyburgess yea that would be possible but im a bit hesitant with props that only set 1 tailwind property. It can be confusing and harder to work with for agents, as they have the tailwind classes in their training data, not the custom props we come up with. Thats also the reason why i prefer to stick with a shadcn-like API, because thats what the agents are trained on.

[bradleyburgess]

@silveltman Thanks. If reducing friction working with agents is one of your primary goals, then that makes a lot of sense.