I still couldn’t put it together, everything seems simple, but the code is very complicated, I tried to do it on grids but everything breaks, I haven’t tried anything else yet, it might be difficult to do on grids, but if you look at the authors of similar videos from YouTube, then everything is simple, but in fact nothing happens) although I think that grids are not successful, unlike flexes.
I’ve temporarily unlisted your topic, @pinkod02, because it is unclear what you are asking.
Are you asking for advice about ways to achieve the layout in your image? What code do you have so far?
Please provide more information, and edit the topic title to something more informative, and I will relist it for you.
1 Like
how to add these pictures in the same order, I tried through background image and grid but nothing worked
You can add the images as foreground images and place your buttons absolutely on top assuming you don’t have loads of content to go on top.
Here’s an old grid layout of mine that I just dropped images into.
(click the edit on codepen link as the small screen display is linearized)
Bear in mind its best to use images of the same aspect ratio or they may get cropped a bit.
If you use background images then you need to give minimum heights to the elements so that there is actually a background to display. However from your picture it looks like these are product images and should really be in the html as normal images.
No, this won’t work for me, the last picture flies behind the container, but I don’t understand why, if the container has a fixed size? It’s impossible to understand, then there were indents between the pictures, in general, now I don’t understand how it all works
Is it possible to do this in Flex? I think it should look simpler and clearer than these grids.
Flex would be more complicated because you would need to nest the four right images in a flex container and use nested flex boxes to achieve.
The grid design is much simpler and needs no nesting and is more robust
That’s because you removed all the important bits and added magic numbers and methods that won;t work. Go back to my example and understand how it works.
You must size the image using the image grid class that I gave otherwise the images will not fit the containers and will just be their natural size. The images aren’t going to magically suddenly fit a container unless you tell them to.
Don’t use magic numbers like top:420px etc as that won;t work if the image is responsive and only 100px tall on small screens. I placed the image from the bottom of the element using a minimal measurement that is more consistent over a wider range.
If you replace the grid-img styles and place those texts from the bottom of each image then things will start to work again.
Don’t just remove styles from my demo unless you know the impact. You can see it works perfectly in my demo and with very little code.
2 Likes
I changed the Grid-IMG styles; in general, all the pictures became large, I still didn’t understand how to connect the last picture, it got out of line, in the end I moved it in the most understandable way, margins to the right, and everything fell into place, I had no other choice and I did not understand
No they will be the size of the container that holds them. If the container is too large then that needs to be adjusted. You can’t just place the image at its natural size as it needs to be responsive otherwise it will never fit for anyone as al images will be different.
I’ve updated your codepen and put back in the things you took out and it works perfectly (apart from your use of px for font-sizes instead of rem)
All images are showing and everything is aligned as it should be.
What last picture? All the images are showing in the demo and in my original demo where you had the size images at different sizes. What is it that does not work in that demo?
I can guarantee 100% that did not work. properly. It may look like it to you but will not make any sense to anyone with a different screen to yours. Margins are not the answer here and will seldom be useful for structural layout. Margins make space between elements and are not supposed to be used for pushing them into places where they shouldn’t be.
2 Likes
I totally get what you’re going through. Coding can be tricky sometimes, and it’s frustrating when things don’t come together as expected. Have you considered trying a different approach, maybe experimenting with flexes instead of grids? Sometimes a fresh perspective can make a big difference. Hang in there, you’ll figure it out! If you need any help, feel free to ask.
I suffered for almost two days with dead grids, but nothing worked) I decided to make it on flex and it took 20 minutes)) grids are a very complex invention))
1 Like
All my grid examples worked and took a couple of minutes to do. You just have to become familiar with the logic.
Let’s see your flex example to make sure you’re not going down that same rabbit hole again 
2 Likes
In general, I roughly know how a grid works, because before I start writing code, I have to imagine it in my mind, I thought that grids would be simple, but this is not the case, in real projects they are very complex, there is a lot of code, and it is unlikely to work correctly. For me, grids have not been finalized in order to write clear code, I sometimes do layout work, but sitting for two days and thinking about how to do this on grids is not normal for me))
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.