Product landing page: How do i do this?

Product landing page: How do i do this?



I have seen on many people’s product page, something like the image above. And i have no idea how to do it. The code i have seen is complicated to me. Especially the css part. The solution i found on CSS-TRICKS gave me a headache.
Is there an easy way to do this? How do i go about making this thing? I was shocked to see a solution that used " ul" and " li "tags. I just thought it was placing a bunch of div boxes side by side.


Search it on Codepen, and look at their code. Or, if you see it on a website, look at in in dev tools. I’ve never made it before, but I should be able to help you if I give it some thought.


how do i get the “boxes” to stay side by side. i am trying to do it now but they are ontop of one another, not side by side


Check the challenges on CSS Flexbox.


Try to use display: flex; then set flex-direction to “row” and also set their width to 33%, depends on how many boxes you like on one row. I think another alternative is to use display: inline-block on the boxes, but I commonly use the flex method.
Oh and here if you are unfamiliar with the flexbox method:


If you need help, look at this pen. As @dlaan07 said, use flexbox.