DEV Community

Discussion on: 15 CSS3 Best practices of for beginners to pro.

Collapse
 
mariog8 profile image
Mario Golik

Awesome suggestion! Context is the King πŸ˜‰ Could you send or show(link) us some examples this "some layouts" ? Just to reference and knowledge obviously...πŸ’» πŸ’‘

Thread Thread
 
darkwiiplayer profile image
π’ŽWii πŸ³οΈβ€βš§οΈ

Can't think of any specific example right now, but think product cards for example, where you have 3 of them on each line and they look somewhat like a grid; but really, they can just be in a flex container with flex-flow: row wrap. Same goes for any other listing of items, like users on a social media site, etc.

Thread Thread
 
mariog8 profile image
Mario Golik

Take your time.... I am very patient and hungry for example, By the way learning from example is, in my opinion, one of the best teaching methods πŸ˜‰
Have You Great Day and do not haste 😎

Thread Thread
 
menomanabdulla profile image
menomanabdulla • Edited

dev-to-uploads.s3.amazonaws.com/up...
Like such layout, you should use grid. It's easily manageable with grid, flex will be most difficult for this one.

Most recently i will bring a series of article based on CSS Grid, stay stick and keep learning. I love your dedication.

Thread Thread
 
joelbonetr profile image
JoelBonetR πŸ₯‡ • Edited

@mariog8 here you have a full ui framework example using flex codepen.io/joelbonetr/pen/PoqzMWL

The refactor using mixins and that was uploaded to a private repo, but this example can show you how easy and handy Flex works, including cards, forms, content blocks and so on with two different approaches as test case/playground.

Thread Thread
 
mariog8 profile image
Mario Golik

thx for great example πŸ˜‰πŸ‘ It is never late to learn.