How do I copy this cool bento style website
https://lucasporterbakker.com/
I suck at anything that I can't use flexbox.
I'm aware that he used
display:grid but I don't know how to get a bunch of boxes with different sizes and also make it responsive. Do I need a bunch of media queries to achieve it?LPB
5X founder, designer, fullstack developer; mentor, and perpetual student.
4 Replies
not a bunch. just 2.
all items span 2 columns (except for the small ones)
- default 2 column grid
- 1 media query for 4 columns
- 1 media query for 6 columns
easiest to do with grid-template-areas because the order changes
here a quick example (i set the grid-areas with inline styles)
https://codepen.io/MarkBoots/pen/MWxwNZW
wow that looks very good
thank you for the codepen
I'll give you a follow. 💓
no problem. make sure you copy or fork the pen if you want to keep it as a reference, i will remove it later on
I forked it