html css
im trying to fit the image inside the black box, what im hoping for is that the images will go down once the max width is reached, dont care about the height just want the images to go down when the max width is reached, or atleast have only 4 items then the others go down a section and another 4 and so on..
2 Replies
Let me see If I have understood your requirements correctly:
1. You have a main Black box, in which you want to contain the drinks images.
2. You have multiple images in a flexbox
3. You want the images to be contained within the black box only
4. You want the images to be organized in 4 columns, after which if any image exists, will go down to the next row.. and so on
If that is the case, then the solution is simple. Use a
grid instead of flex on your <section>. And do:
That should work. There are more options you can use on the grid-template-columns through which you can fine tune the grid to your likingadding
flex-wrap: wrap;on the container should move them to the next row when they run out of horizontal space.
though, as @senrastalker suggests, grid would probably be a better option here
Just to clarify, grid will make all the columns have the same width and would fix you to the number of columns that you have defined.
Flex, with flex-wrap: wrap, would allow the "columns" (cells?) to have variable widths and wouldn't necessarily limit the row to 4 items, it would depend on the width of each of its children - they can ben made to have fixed widths but in that case grid would be a simpler option.