CSS grid stacking elements vertically when browser hits a certain width

HTML-CSS
1

I am trying to use CSS grid to build a photo library’s frontend.
I am running into the issue that if I resize my browser to a certain width, the child element will spill out of the parent element which I set it as display: grid;

in the example I gave you above you can try to resize the window width.
how do I fix this?
I want those child elements stacked up vertically when browser becomes too narrow.
is there any way I can do this only using css grid? or I have to use media query/

2

Using repeat with auto-fill, maybe?

3

Remove this:

*{
	min-width: 480px;
	box-sizing: border-box;
}
1 Like
4

wow thanks!!! (20 character)