need help with grid in responsive
codepen link : https://codepen.io/Vicky-clowdy/pen/jOjoQPY
So the red circles will be replaced by images on my project but the problem is
the images are displaying correctly in devtools responsive like that picture but when i use vs port forward and saw on mobile the first column is not displaying , it shows from 2nd column.
i tried grid-auto-flow:row and still the first 2 elements not display properly

5 Replies
Here the mobile screenshot

you are repeating ids
ids are supposed to be unique
also, the grid is in the wrong element
you have it on
#food-order-div
and not on #food-items
I use map function to return that #food-items div , i made a mistake on codepen code
The error im facing is actually there on codepen code too now
It occurs on mobile responsive
From codepen , the first 2 div #img1,#img2 which color is green and yellow is not displaying
try removing
justify-content: space-evenly;
.Thank u sm man , i have been confused for last couple of hours for this