Im having trouble fixing my layout, so basically i want to design a layout for my website project that has a sidebar and a header, but i want the header and sidebar to be fixed but the content of my main with a grid content is the only scrollable im close to making it work, but when i put the place-content: center on my cards-container it overlaps to the header and the cards cannot be scrolled.
my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Main with sidebar | Grid</title>
<link rel="stylesheet" href="styles.css" />
<link
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet"
/>
</head>
<body>
<header class="header-nav"></header>
<section class="sidebar">
</section>
<main class="main">
<div class="cards-container">
<article class="card">card content</article>
<article class="card">card content</article>
<article class="card">card content</article>
<article class="card">card content</article>
<article class="card">card content</article>
<article class="card">card content</article>
</div>
</main>
</body>
</html>
my css:
body {
background-color: #fff;
min-height: 100dvh;
font-family: "Fira Code", monospace;
display: grid;
grid-template-columns: 4.5rem 1fr;
grid-template-rows: 56px 1fr;
grid-template-areas:
"header header"
"sidebar main";
}
/* Styling */
.header-nav {
background-color: var(--header-nav-bg);
border-block-end: 1px solid var(--border-color);
grid-area: header;
}
.sidebar {
background-color: var(--body-bg);
color: var(--color-secondary);
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(123, 123, 123, 0.495);
grid-area: sidebar;
padding-block: 1rem;
}
.main {
grid-area: main;
}
.cards-container {
background-color: var(--body-bg);
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(290px, 300px));
padding-inline: 1.5rem;
padding-block: 3rem;
}
.card {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 10px;
padding-inline: 1rem;
padding-block: 1rem;
color: #fff;
}
.card:nth-child(1) {
grid-area: c1;
}
.card:nth-child(2) {
grid-area: c2;
}
.card:nth-child(3) {
grid-area: c3;
}
.card:nth-child(4) {
grid-area: c4;
}
.card:nth-child(5) {
grid-area: c5;
}
.card:nth-child(6) {
grid-area: c6;
}
Can someone teach me whats the best approach and how to fix this?
New contributor
RegistryBit is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.