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.2 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!