Display images in a 2-column grid on mobile, just like on desktop

[hooziwang]

What version of starlight are you using?

0.22.1

What is your idea?

I put a lot of images in CardGrid, and I want the images to be displayed in 2 columns on the mobile side, just like on the PC side.

how should I modify the code? Thank you

Why is this feature necessary?

When there are a large number of images, two columns are displayed to facilitate user browsing.

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.

[delucis]

For something like this, it might be best to make a custom grid component that gives you full flexibility, for example:

---
// src/components/TwoColumnGrid.astro
---

<div class="my-grid">
  <slot />
</div>

<style>
.my-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
</style>

Then in your content you can use this:

import TwoColumnGrid from '/src/components/TwoColumnGrid.astro';

<TwoColumnGrid>
[![](/1.webp)](/url_1/)
[![](/2.webp)](/url_2/)
[![](/3.webp)](/url_3/)
</TwoColumnGrid>