In this pen, there is a title, description and horizontal images. If you view it in a screen that’s between 1024 and 1660 pixels wide, you should observe that the horizontal images (ID “social-media-images”) overflow their container, which is a grid. The width of the “social-media-images” should stay fixed at 1660 pixels as long as the screen width is like described above. At the same time, it’s above sibling (the element that wraps the text) has the same width (1660 pixels).

I want a responsive grid layout where the number of columns changes dynamically based on screen size. If there are fewer items than columns, they should use the available space or at least be centered and not aligned on the left side.

Please see this playground https://play.tailwindcss.com/SMkXmO9Mo8