MediaGallery
A collection of responsive media thumbnails.
Use MediaGallery to display a collection of tappable thumbnails of various sizes.
By default, four items are visible with small thumbnails on mobile and fluid thumbnails on larger sizes. Here's a very basic example.
Size
Use size property change the default size of the thumbnails. This property accepts responsive values so that you can have different sizes on different screens.
When set to a fixed size like small or medium, the gallery will overflow and scroll if the container hasn't enough space.
Visible tiles
Use the visibleTiles property to control the number of items visible, including the last item. This property accepts responsive values, so you can change the number of visible items on different screens.
Disable Media Previewing
Set preview property to false to disable previewing media items.
Unoptimized images
Use the unoptimized property to disable Next.js image optimization.