Kevin Powell - Community•13mo ago

How to setup the initial layout on a page - where do I put containers?

If you were building a layout from scratch, how would you do it, and where would you put containers? THAT is my biggest hurdle with CSS, can never seem to get it right.

<main>
    <div class="main-wrapper">
        <h1>Hello world</h1>
    </div>
</main>

<main>
    <div class="main-wrapper">
        <h1>Hello world</h1>
    </div>
</main>

If I have this code, my assumption is to put display: grid/flex on the main-wrapper that I created, but then it doesn't fill the entire space of the screen, even if I do the below

html,
body,
main {
    height: 100%;
    margin: 0 auto;
}


main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    margin: 0 auto;
    border: 2px solid black;
}

html,
body,
main {
    height: 100%;
    margin: 0 auto;
}


main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    margin: 0 auto;
    border: 2px solid black;
}

I'm just messing around with layouts right now, I don't have anything I really want to build, but how do I know where to put the grid/flex containers, and when do I ever want to put them on the body (if at all), and main (if at all)? the above code does put my grid on the entire screen, however it has a very slight scroll vertical, so it's like.. 5px too much?

20 Replies

vince•13mo ago

I like putting things in max-width containers. Something like:

main
  section
    div.max-width
      ...content...

main
  section
    div.max-width
      ...content...

Put a width: min(100%, 1300px) on the max-width containers. Sections I put padding on them. Something like

section {
  padding: clamp(4rem, 4rem + 1vw, 8rem) clamp(1rem, 1rem + 1vw, 4rem);
}

section {
  padding: clamp(4rem, 4rem + 1vw, 8rem) clamp(1rem, 1rem + 1vw, 4rem);
}

From there things kind of set themselves up pretty nicely. No need to put flex or grid on your main container, I usually like putting it on my .max-width, though honestly adding another div to the markup just to apply flex/grid properties underneath .max-width might be ideal (separation of concerns), though it'll bloat up your markup It's kind of an art though; do what works best for you and develop your style as you use css more. Let me know if you have any more questions! I think a common trap people get into is using flex/grid for everything. Don't use it unless you have to. More styles = more maintenance = more annoyance

CDLOP•13mo ago

That's me 😛 but I don't know what else I could use, I only just realized I could use align-items: center; to center my h1 in my header, instead of sticking it in a flex display lmao

vince•13mo ago

Wait that works without a display on it? 😂 It's kind of hard to explain when to use flex/grid and when not to.. I guess a good rule of thumb is, if you find yourself using it for everything maybe look closely and see if you really need it or not. Definitely use flex or grid for this if you want to center something

CDLOP•13mo ago

just going to mess around with components and grid/flex to really understand how it works

ghostmonkey•13mo ago

in your src +layout.svelte, you can do like this:

 <div class="grid>
<Header />
<slot />
<Footer />
</div>

 <div class="grid>
<Header />
<slot />
<Footer />
</div>

CDLOP•13mo ago

Interesting

ghostmonkey•13mo ago

then set the grid to auto 1fr auto and then done

CDLOP•13mo ago

lemme try that now

vince•13mo ago

Ohhh yea I forgot about this!

CDLOP•13mo ago

where are you suggesting I put auto 1fr auto btw? my brain took me to grid-template-rows

ghostmonkey•13mo ago

wherever you define that grid class, so if you import an app.css, there is a spot, or you can just add it in a style tag

CDLOP•13mo ago

I meant, how would you do the auto 1fr auto sorry, like...

.grid {
display: grid;
grid-template-rows: auto 1fr auto;

.grid {
display: grid;
grid-template-rows: auto 1fr auto;

That's how I thought

ghostmonkey•13mo ago

yes

MarkBoots•13mo ago

kevin posted a yt-video today where he uses grid with column line names to set up the layout in such a way that containers/wrappers are not nessessary. you could give it a look

CDLOP•13mo ago

ohhhhh yes I meant to watch that, ok thanks all 🙂 appreciate the help yet again 😅 one day it'll stick.

ghostmonkey•13mo ago

<div class="layout">
    <Header />
    <slot />
    <Footer />
</div>

<style>
.layout {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    max-inline-size: 1440px;
    margin-inline: auto;
}
</style>

<div class="layout">
    <Header />
    <slot />
    <Footer />
</div>

<style>
.layout {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    max-inline-size: 1440px;
    margin-inline: auto;
}
</style>

CDLOP•13mo ago

Oh that's fantastic, thanks ghost!

vince•13mo ago

I'm not sure what max-inline-size is, but I'm assuming it works similarly to max-width. Wouldn't that prevent the header and footer from taking full width of the viewport?

ghostmonkey•13mo ago

Yeah in this specific case it would make the max width 1440px for everything you could just remove that and add a container class to the content instead if you wanted full header/footer.

CDLOP•13mo ago

yeah I did notice that just now, it limits how wide they go, but it's an easy fix

Gaming

Programming

How to setup the initial layout on a page - where do I put containers?