Not always; some layouts look like they should be done using display: grid, when in reality they are just a bunch of boxes that wrap over several lines. In these cases, display: flex is still the better option.
Grid becomes useful when you want finer control over the alignment of your elements, specially when you don't want to just fill the grid cells one after another.
Awesome suggestion! Context is the King ๐ Could you send or show(link) us some examples this "some layouts" ? Just to reference and knowledge obviously...๐ป ๐ก
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.
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 ๐
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.
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
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.
@darkwiiplayer
cool, I am totally agreed with you. There is lots of complex layout we can still manage with flex. We can also use grid to solve the same problem, In such case I would love to use flex. Usually I use grid for more complex layout, such multiple rows, cols and also multiple alignment issues. Love your effort man. Thanks a lot.
Sometimes it's even easier to use flex, because that way you can just define a desired width for your items and let them wrap wherever they want. With grid, one would have to use media-queries to define cut-off widths for 2, 3, 4, etc. columns. I'd much rather let the browser figure those things out instead of adding special cases for different resolutions ๐
Not always; some layouts look like they should be done using
display: grid, when in reality they are just a bunch of boxes that wrap over several lines. In these cases,display: flexis still the better option.Grid becomes useful when you want finer control over the alignment of your elements, specially when you don't want to just fill the grid cells one after another.
Awesome suggestion! Context is the King ๐ Could you send or show(link) us some examples this "some layouts" ? Just to reference and knowledge obviously...๐ป ๐ก
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.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 ๐
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.
@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.
thx for great example ๐๐ It is never late to learn.
@darkwiiplayer cool, I am totally agreed with you. There is lots of complex layout we can still manage with flex. We can also use grid to solve the same problem, In such case I would love to use flex. Usually I use grid for more complex layout, such multiple rows, cols and also multiple alignment issues. Love your effort man. Thanks a lot.
Sometimes it's even easier to use
flex, because that way you can just define a desired width for your items and let them wrap wherever they want. With grid, one would have to use media-queries to define cut-off widths for 2, 3, 4, etc. columns. I'd much rather let the browser figure those things out instead of adding special cases for different resolutions ๐Exactly, it is.