Confused about layout and page .jsx
Answered
Blanc de Hotot posted this in #help-forum
Blanc de HototOP
Ive been wondering where to set a width on, the layout.jsx file or the page.jsx file. For example on homepages or the landing page of the website sometimes I want to set the width to around 1200 max width would I put this in the main layout or in the main page in the /app dir. if you set it in the layout what if you add a width or padding that outgrows the width?
Answered by Chum salmon
It is up to your need but here is the idea.
I usually set layout width to full so it extends across the screen because I like to have navbar and footer background to go across the screen rather than fixed. So it would go something like this:
layout.tsx
Then in the
About this question: "what if you add a width or padding that outgrows the width?"
It should never happen whether you specify width in layout or page.tsx. Why?
- How can padding 24px (classic value) overgrow the 1000+ px container?
- Why would you set inner elements to be more than 1000 px?
The problem is you stacking them wrong. Always use flex either row or column, it won't grow outside the outer div. For smaller devices adjust Tailwind
You need to have a sense of container when you have enough experience.
You will always have 1 main container with fixed width. It can go something like this
- layout.tsx =
- page.tsx out most container div =
Now you can make everything inside the main div to have
Keep in mind that most of the time you will have to adjust the width according to screen size so
I usually set layout width to full so it extends across the screen because I like to have navbar and footer background to go across the screen rather than fixed. So it would go something like this:
layout.tsx
<body className="flex flex-col w-full min-h-[100vh] justify-between">
<Navbar />
{children}
<Footer />Then in the
Navbar and Footer I can specify the width = 100%. However, the page.tsx (the children) will have a fixed width (usually 1280px for my taste) so that the content stays within this area.About this question: "what if you add a width or padding that outgrows the width?"
It should never happen whether you specify width in layout or page.tsx. Why?
- How can padding 24px (classic value) overgrow the 1000+ px container?
- Why would you set inner elements to be more than 1000 px?
The problem is you stacking them wrong. Always use flex either row or column, it won't grow outside the outer div. For smaller devices adjust Tailwind
sm:, md:, and lg: accordingly.You need to have a sense of container when you have enough experience.
You will always have 1 main container with fixed width. It can go something like this
- layout.tsx =
w-full- page.tsx out most container div =
w-full max-w-[1280px]Now you can make everything inside the main div to have
w-full or w-[%] to keep it responsive according to their parent container. If you wanna have some fixed width like a product card. You have to wrap them in a container that has reponsive behavior. For example, a flex container with flex-wrap Or even better, a grid container with min-max.Keep in mind that most of the time you will have to adjust the width according to screen size so
md:, sm:, and lg: from tailwind are your best tool so get used to it. I might not cover everything but feel free to ask additional questions.14 Replies
Chum salmon
It is up to your need but here is the idea.
I usually set layout width to full so it extends across the screen because I like to have navbar and footer background to go across the screen rather than fixed. So it would go something like this:
layout.tsx
Then in the
About this question: "what if you add a width or padding that outgrows the width?"
It should never happen whether you specify width in layout or page.tsx. Why?
- How can padding 24px (classic value) overgrow the 1000+ px container?
- Why would you set inner elements to be more than 1000 px?
The problem is you stacking them wrong. Always use flex either row or column, it won't grow outside the outer div. For smaller devices adjust Tailwind
You need to have a sense of container when you have enough experience.
You will always have 1 main container with fixed width. It can go something like this
- layout.tsx =
- page.tsx out most container div =
Now you can make everything inside the main div to have
Keep in mind that most of the time you will have to adjust the width according to screen size so
I usually set layout width to full so it extends across the screen because I like to have navbar and footer background to go across the screen rather than fixed. So it would go something like this:
layout.tsx
<body className="flex flex-col w-full min-h-[100vh] justify-between">
<Navbar />
{children}
<Footer />Then in the
Navbar and Footer I can specify the width = 100%. However, the page.tsx (the children) will have a fixed width (usually 1280px for my taste) so that the content stays within this area.About this question: "what if you add a width or padding that outgrows the width?"
It should never happen whether you specify width in layout or page.tsx. Why?
- How can padding 24px (classic value) overgrow the 1000+ px container?
- Why would you set inner elements to be more than 1000 px?
The problem is you stacking them wrong. Always use flex either row or column, it won't grow outside the outer div. For smaller devices adjust Tailwind
sm:, md:, and lg: accordingly.You need to have a sense of container when you have enough experience.
You will always have 1 main container with fixed width. It can go something like this
- layout.tsx =
w-full- page.tsx out most container div =
w-full max-w-[1280px]Now you can make everything inside the main div to have
w-full or w-[%] to keep it responsive according to their parent container. If you wanna have some fixed width like a product card. You have to wrap them in a container that has reponsive behavior. For example, a flex container with flex-wrap Or even better, a grid container with min-max.Keep in mind that most of the time you will have to adjust the width according to screen size so
md:, sm:, and lg: from tailwind are your best tool so get used to it. I might not cover everything but feel free to ask additional questions.Answer
Blanc de HototOP
Actually that makes a lot of sense, I will play around with this. Thanky a lot!
If this works for you, check my implementation: I have a custom component called “ContainerWrapper” that literally wraps whatever content I want to have the same wrapper styles for consistency.
<ContainerWrapper>{children}<ContainerWrapper/>Look, and it’s entendible in case you wanna override the default classNames depending on where you use it, or add a background color etc.
interface ContainerWrapperProps extends ComponentProps<"div"> {}
function ContainerWrapper({
children,
className,
...props
}: ContainerWrapperProps) {
return (
<div
className={cn(
"relative mx-auto w-full max-w-[96rem] px-4 lg:px-6",
className,
)}
{...props}
>
{children}
</div>
);
}This way, my Header, PageContent and Footer wrap their content inside this Component that applies the same classes (Padding. Max Width, etc). If you wanna change the Max Width or the Padding accordingly to the screen size, then you just need to modify one place (ContainerWrapper) and everything works perfectly and clean.
@LuisLl Look, and it’s entendible in case you wanna override the default classNames depending on where you use it, or add a background color etc.
tsx
interface ContainerWrapperProps extends ComponentProps<"div"> {}
function ContainerWrapper({
children,
className,
...props
}: ContainerWrapperProps) {
return (
<div
className={cn(
"relative mx-auto w-full max-w-[96rem] px-4 lg:px-6",
className,
)}
{...props}
>
{children}
</div>
);
}
Chum salmon
Isn't styling a parent <div> or <body> easier?
Unless you wanna wrap each individual <Footer> and <Header> in this <ContainerWrapper>
If that's the case, wouldn't it be better to create a style in globals.css inside
Unless you wanna wrap each individual <Footer> and <Header> in this <ContainerWrapper>
If that's the case, wouldn't it be better to create a style in globals.css inside
@layer base so that you can overwrite?Like I said, I like this approach, you’re free to use whatever works for you.
I like it this way because no matter what I’m wrapping, the styles will always be consistent across all components/sections.
I don’t like having it all wrapped in a because dividers or borders will also be cropped at that max width and for some section I just wanna apply these classes to the children not the parent, makes sense? It’s tricky to explain.
I like it this way because no matter what I’m wrapping, the styles will always be consistent across all components/sections.
I don’t like having it all wrapped in a because dividers or borders will also be cropped at that max width and for some section I just wanna apply these classes to the children not the parent, makes sense? It’s tricky to explain.
Chum salmon
If this is your goal, wouldn't create a simple css class better? Less code to create and less code to use? What you're doing is fine but isn't it just extra for no reason?
@Chum salmon If this is your goal, wouldn't create a simple css class better? Less code to create and less code to use? What you're doing is fine but isn't it just extra for no reason?
No, it’s not. React allows for composition and that’s what I’m doing.
Yes you could use a CSS class but what I want to share is the behavior not only the classes applied.
By wrapping anything in that reusable Wrapper component I can Not only share the classes applied, but I can also share behavior and even add more than just one HTML element wrapping whatever I want.
Yes you could use a CSS class but what I want to share is the behavior not only the classes applied.
By wrapping anything in that reusable Wrapper component I can Not only share the classes applied, but I can also share behavior and even add more than just one HTML element wrapping whatever I want.
Check this out for example:
How would you easily share all this behavior and styles with a CSS class and have it look clean and predictable in your JSX?
Here’s how it looks on the website, whatever section o wrap on <ContainerWrapper /> now behaves the same, has a max width that’s the same, applies the same paddings and if I want to, I make it show those canes at the sides with a boolean. Not to mention it’s fully extensible from the outside.
function ContainerWrapper({
children,
className,
withCane = false,
...props
}: ContainerWrapperProps) {
if (withCane) {
return (
<div
className={cn(
"relative mx-auto w-full max-w-[96rem] px-4 lg:px-6",
className,
)}
{...props}
>
{children}
<div className="inset-y-0 left-0 hidden w-10 -translate-x-full border-x bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed xl:absolute xl:block" />
<div className="inset-y-0 right-0 hidden w-10 translate-x-full border-x bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed xl:absolute xl:block" />
</div>
);
}
return (
<div
className={cn(
"relative mx-auto w-full max-w-[96rem] px-4 lg:px-6",
className,
)}
{...props}
>
{children}
</div>
);
}How would you easily share all this behavior and styles with a CSS class and have it look clean and predictable in your JSX?
Here’s how it looks on the website, whatever section o wrap on <ContainerWrapper /> now behaves the same, has a max width that’s the same, applies the same paddings and if I want to, I make it show those canes at the sides with a boolean. Not to mention it’s fully extensible from the outside.
@LuisLl Click to see attachment
Chum salmon
It makes sense if your web app composed of several widgets like in the image. But the dude just wanted to know if he should set width in the layout.tsx or not and judging from his question, it's likely that he isn't making something similar to your example, rather a quite simple website. For that reason, creating a separated component so that you can display canes based on Boolean condition and other behaviors is overkill in my opinion. My take is that, of course there are ways to make things better or more functionality but it requires more coding and does your site really need it? I think CSS class is more than enough to solve his problem including overwriting style as long as you put the class in base layer. That is all.
@Chum salmon It makes sense if your web app composed of several widgets like in the image. But the dude just wanted to know if he should set width in the layout.tsx or not and judging from his question, it's likely that he isn't making something similar to your example, rather a quite simple website. For that reason, creating a separated component so that you can display canes based on Boolean condition and other behaviors is overkill in my opinion. My take is that, of course there are ways to make things better or more functionality but it requires more coding and does your site really need it? I think CSS class is more than enough to solve his problem including overwriting style as long as you put the class in base layer. That is all.
Dude, I don’t wanna be rude but I just offered a compostable way to create a wrapper component. Use it if you want, ignore it if you don’t. Same goes for the OP. He will use whatever solution works best for him. I’m done here!
@LuisLl Dude, I don’t wanna be rude but I just offered a compostable way to create a wrapper component. Use it if you want, ignore it if you don’t. Same goes for the OP. He will use whatever solution works best for him. I’m done here!
Chum salmon
My bad. Didn't mean to make you upset. Part of me was trying to understand why did you offer that solution. So when it doesn't make sense in my head, I asked for clarification and telling you why I think otherwise.