August 7, 2018 at 6:27 am #275077
Hi! I need some help.
I’m having a hard time deciding which one will I use when creating web pages. I have read some articles that both layout can be used together, but I don’t know how.August 7, 2018 at 6:37 am #275078
You can use them together but not necessarily one the same element.
For instance I can place a div in a CSS-Grid parent container (which has
display:grid) but the child div could have
display:flexto lay out it’s children.
Alternatively, you can apply Flexbox and CSS Grid to an element and, if a broswer supports one but not the other then the supported display option would be used. If both are supported, then the last one stated would apply.
In other words, depending on which browsers you wish to support, you can fallback to flexbox if CSS-Grid is not supported (and vice versa).August 8, 2018 at 12:10 am #275100
I wrote a blog post about this, I hope it helps! :) https://medium.com/@emmawedekind/when-to-use-css-flexbox-vs-grid-or-both-c1a5f01dc88aAugust 8, 2018 at 6:36 am #275104
Thanks!August 8, 2018 at 6:56 am #275105
CSS Grid should be used for 2-dimensional layouts vs. Flexbox should be used for 1-dimensional layouts. Ex) Grid should be used to lay out the sections of a web app (header, navgiation, aside, main, footer). Flexbox could be used to position navigation items within the
nav> grid area.August 9, 2018 at 7:16 am #275151
When I reduce the size of the screen, the content exceeds the container. How to solve this problem?August 9, 2018 at 7:18 am #275152
flex-wrap: wrap if you’re using flexbox. If you’re using grid, you have to make sure your container sizes don’t exceed the viewport width
You must be logged in to reply to this topic.