Forums

This topic contains 6 replies, has 3 voices, and was last updated by  emmawedekind 5 months, 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #275077

    Swift
    Participant

    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.

    #275078

    Paulie_D
    Moderator

    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

    #275100

    emmawedekind
    Participant
    #275104

    Swift
    Participant

    Thanks!

    #275105

    emmawedekind
    Participant

    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.

    #275151

    Swift
    Participant

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

    #275152

    emmawedekind
    Participant

    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-link icon-logo-star icon-search icon-star