Forums

Give help. Get help.

  • # August 7, 2018 at 6:27 am

    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

    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).

    Grid to Flex

    # August 8, 2018 at 12:10 am

    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

    # August 8, 2018 at 6:36 am

    Thanks!

    # August 8, 2018 at 6:56 am

    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

    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

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag