Grid for layout page is not working
Answered
WhyFencePost (Ping Reply) posted this in #help-forum
I have a grid for my layout page, and I expect it to be full width and height, with a section being the page content. Looking at dev tools my body is not full height, and only takes up small part of the screen. Why?
Code below:
css
layout.tsx
page.tsx
Code below:
css
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--foreground-rgb: 0, 0, 0;
--background-rgb: 241, 239, 246;
}
body {
color: rgb(var(--foreground-rgb));
background: rgb(var(--foreground-rgb));
}
.main-grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 4.5rem 1fr;
grid-template-rows: 4.5rem 1fr;
gap: 0.7px 0.7px;
grid-auto-flow: row;
grid-template-areas:
"main-logo main-header"
"main-whitespace page-content";
}
.main-logo {
grid-area: main-logo;
background: rgb(var(--background-rgb));
}
.main-header {
grid-area: main-header;
background: rgb(var(--background-rgb));
}
.main-whitespace {
grid-area: main-whitespace;
background: rgb(var(--background-rgb));
}
.page-content {
grid-area: page-content;
background: rgb(var(--background-rgb));
overflow-x: hidden;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Core",
description: "Core Development",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<div className="main-grid">
<div className="main-logo"></div>
<div className="main-header"></div>
<div className="main-whitespace"></div>
<div className="page-content">{children}</div>
</div>
</body>
</html>
);
}page.tsx
export default function Home() {
return (
<>
<h1>Hello World</h1>
</>
);
}34 Replies
I can not use a tailwind grid as far as I know as I need to be able to use rem for scale.
ok in that case, define what is full height
I am sorry this is my first ever next project.
@Arinji ok in that case, define what is full height
takes up viewport
ok and does css know this :/
no it does not, you need to specify
rly? i have never had to do that in a page before
give the body min 100vh
Answer
@WhyFencePost (Ping Reply) rly? i have never had to do that in a page before
yea lol, 100% height...of what xD
@WhyFencePost (Ping Reply) I can not use a tailwind grid as far as I know as I need to be able to use rem for scale.
you can use rem in tailwind btw
@Arinji yea lol, 100% height...of what xD
but in a grid?
look at it
@WhyFencePost (Ping Reply) but in a grid?
well the grid will take 100% of its parent
its parent being the body
yea, but i mean that in tailwind i did not think you could have a grid with non uniform colums and rows
@WhyFencePost (Ping Reply) yea, but i mean that in tailwind i did not think you could have a grid with non uniform colums and rows
never used grid myself in tailwind so cant tell you much abt that
sorry
but yea try giving the body a specific width
or better, make a container div
and give it 100vh of height
and leave your body as is
i did now, it worked, thanks
its almost never good practice to change body around
im not btw
ah kk, mark a solution :D
thanks, yea, sry my mind went "react issue, as your new to react", instead of checking my css
its all good, css is dumb xD
maked xD
marked
sry