Kevin Powell - Community•12mo ago

It is better to use FlexBox or Position for this layout?

I am trying to figure out what is the "right" mthod to use to create a certain layout. I attached a picture of what the desktop look for the layout would be. Basicly a sticky header, two columns but the right column has a footer under it. When it converts the mobile version the sticky header stays, the side bar gets hidden until a hambergure menu icon is clicked then it will slide out, the main content and footer will take up the whole width as normal. Obviously the sticky header needs to be position call but would it be better to use a flexbox for the reset of the segmenting or should I do position calls? Thanks!

16 Replies

clevermissfox•12mo ago

personally I would opt for grid for this

Jochem•12mo ago

same. Grid with template-areas flex is suboptimal, but possible. Position:absolute is just going to be a massive pain to get to work and be responsive

Matthew AlexandrosOP•12mo ago

What is the advatage of using grid over box with this?

clevermissfox•12mo ago

Assuming you mean grid over flex, it’s much simpler markup. You don’t have to create so many wrappers. And also will be much easier with grid to make it responsive. With the screenshot you posted to use flex you would need to put main and footer into a wrapper-1, then put sidebar and wrapper-1 into wrapper-2 with a flex row. Then headed and wrapper-2 would just stack as usual. Then when you need to do media queries it will be nightmare , you’ll have to make wrapper-2 a column so sidebar goes on top as you don’t want it under the footer but you probably actually want sidebar between main and footer. Can’t access those to change order bc they are in their own div With grid you just need to put the items themselves in the markup- header, sidebar, main and footer - then make two columns and set up

grid-template-areas: 
“Header header “
“Sidebar main”
Sidebar footer”

If you assign them grid-area names, you can then adjust your media query without having to declare anything on the children selectors, and you can order everything how you wish

Matthew AlexandrosOP•12mo ago

I am actually reproduing the layout and the source project does not have all the wrappers you are talking about. The body is set to flex with column then in the body it is just <header></header> <nav id="sideBar</nav> <main></main <footer></footer> Though I will admit I don't really understand all the CSS that is being used as there is a LOT of it. It does sounde like the grid might still be cleaner and easier. With the grid can the sidebar still be hidden and become a pop-out bar? I would assume just doing visibility: hidden and using position would work?

Jochem•12mo ago

with grid, all you'd need is something like

body {
  display: grid;
  grid-template-areas: "header header" "nav main" "nav footer";
  grid-template-columns: var(--nav-width) 1fr;
}
nav {
  grid-area: nav;
}
main {
  grid-area: main;
}
footer {
  grid-area: footer;
}

body {
  display: grid;
  grid-template-areas: "header header" "nav main" "nav footer";
  grid-template-columns: var(--nav-width) 1fr;
}
nav {
  grid-area: nav;
}
main {
  grid-area: main;
}
footer {
  grid-area: footer;
}

Matthew AlexandrosOP•12mo ago

That does look like much easier code then what I am lookin at as my source. I am new to grids and have been watching some of Kevin's videos on it so I do aprecaite the patients with me. Am I correct in my previous assumption that when the viewport gets down to mobile size I would just use visibility and position CSS to hide the side bar and make it a pop in menu? If that is the correct assumption then I will start slapping code together to try and replicate the layout.

Jochem•12mo ago

you'd use a media query to change things, either by setting --nav-width to 0, or changing the grid-area or grid-template-area values

clevermissfox•12mo ago

How is the sidebar next to main/footer if the body is set to column and there are no wrappers? I don’t like to set columns on many flex items unless I need to utilize a specific flex property as the box model with block elements stack like columns anyway. Oh I missed the “header is sticky” note

Matthew AlexandrosOP•12mo ago

Ok, I think I get it. So I would set width to 0 and that would make the side bar "hidden" and then when it need to pop out dynamicly change the width to what it should be to make it appear? This is litterly the primary layout html:

<body>
    <div id="fadeElement"></div>
    <header>
        @await Component.InvokeAsync("SiteMenu", new { viewName = "Desktop" })
    </header>
    <nav id="sectionNavBar">
        @await Component.InvokeAsync("SectionMenu")
    </nav>
    <main>
        <div class="content">
            @RenderBody()
            <div id="endContentAd">
                &nbsp;
            </div>
        </div>
        <div id="rightSideBarAd">
            &nbsp;
        </div>
    </main>
    <footer>
        <p>Site Design</p>
    </footer>
    <nav id="mobileSiteNavBar">
        @await Component.InvokeAsync("SiteMenu", new { viewName = "Mobile" })
    </nav>
</body>

<body>
    <div id="fadeElement"></div>
    <header>
        @await Component.InvokeAsync("SiteMenu", new { viewName = "Desktop" })
    </header>
    <nav id="sectionNavBar">
        @await Component.InvokeAsync("SectionMenu")
    </nav>
    <main>
        <div class="content">
            @RenderBody()
            <div id="endContentAd">
                &nbsp;
            </div>
        </div>
        <div id="rightSideBarAd">
            &nbsp;
        </div>
    </main>
    <footer>
        <p>Site Design</p>
    </footer>
    <nav id="mobileSiteNavBar">
        @await Component.InvokeAsync("SiteMenu", new { viewName = "Mobile" })
    </nav>
</body>

clevermissfox•12mo ago

You said that the body has column set on it and there are no wrappers. Was just wondering how your wireframe screenshot works and has the sidebar next to the main and footer if that’s the case . That would mean everything stacks on top of each other and the sidebar couldn’t take up two rows. You’re turning my world upside down

Matthew AlexandrosOP•12mo ago

Feel free to see it in action at https://www.ffinfo.com/ It is my site but not my code. I had a contracter create the html and css code but I was never 100% happy with it becasue there seemed to be a lot of unneded CSS and why does the navigation need to be generated twice? So now I am attempting to redo the entire thing from scratch to A: learn it/underand it and B: clean the code up and reduce the payload size

-- Final Fantasy Info.com

Jochem•12mo ago

that would probably work yeah

Matthew AlexandrosOP•12mo ago

Cool, thanks for all the help. Last time I really had to deal with CSS and such was back in the days of IE so I am really relearning. Now that you guys have helped me get a good idea of the jumping point time to hit the editor and start plugging away to see if I can't make magic happen.

Jochem•12mo ago

oof, yeah, the IE era was a bad one. You'll be glad to find how much better CSS has gotten. The differences between browsers are much smaller too

Matthew AlexandrosOP•12mo ago

Yea, I have done some CSS work since back then but it was mostly like I did for my site now. Someone else does the heavy lifting, I tweek the code a bit and write the css for the main content. This time around I am going from the ground up. Looking at a website on CSS compaitbily it is nice to see I don't have to contrain my self in what I can use so much, it looks like everything I have wanted to use so far has been supported for like 10 yearsish.

Gaming

Programming

It is better to use FlexBox or Position for this layout?