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.
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
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
I like putting things in max-width containers.
Something like:
Put a
width: min(100%, 1300px)
on the max-width containers.
Sections I put padding on them.
Something like
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 annoyanceThat'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
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 somethingjust going to mess around with components and grid/flex to really understand how it works
in your src +layout.svelte, you can do like this:
Interesting
then set the grid to auto 1fr auto
and then done
lemme try that now
Ohhh yea I forgot about this!
where are you suggesting I put auto 1fr auto btw?
my brain took me to grid-template-rows
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
I meant, how would you do the auto 1fr auto sorry, like...
That's how I thought
yes
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
ohhhhh yes I meant to watch that, ok thanks all 🙂 appreciate the help yet again 😅
one day it'll stick.