Can I use Flexbox and CSS Grid together?

[Swift]

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.

[Paulie_D]

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:flex to 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).

https://css-tricks.com/grid-to-flex/

[emmawedekind]

I wrote a blog post about this, I hope it helps! :) https://medium.com/@emmawedekind/when-to-use-css-flexbox-vs-grid-or-both-c1a5f01dc88a

[Swift]

Thanks!

[emmawedekind]

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.

[Swift]

When I reduce the size of the screen, the content exceeds the container. How to solve this problem?

[emmawedekind]

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

[Author]

Posts