The problem I have with the snippet below is the column on the right-hand side is too wide on smaller devices.
I have used named grid lines and grid-template-columns and I have used fr to try and weight them:
grid-template-columns:
[full-start center-start] 1fr
[center-end drawer-start] 6fr
[drawer-end full-end] 5fr;
What probably makes sense on smaller devices is:
[full-start center-start] 1fr
[center-end drawer-start] 9fr
[drawer-end full-end] 2fr;
Is there any way to scale this column so it gets smaller in smaller devices without having to use media queries/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
height: 100%;
}
body {
text-rendering: optimizeSpeed;
height: 100%;
}
#root {
height: 100%;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
z-index: 10;
background: yellow;
height: 3rem;
}
.container {
display: grid;
grid-template-areas:
"head drawer"
"main drawer";
height: 100%;
grid-template-rows: auto 1fr;
grid-template-columns:
[full-start center-start] 1fr
[center-end drawer-start] 6fr
[drawer-end full-end] 5fr;
padding-top: 2rem;
}
.row-1 {
border: 10px solid blue;
grid-column: center-end / drawer-start;
}
.main {
border: 10px solid orange;
overflow-y: auto;
height: 100%;
grid-column: center-end / drawer-start;
}<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="root">
<div class="fixed">Fixed</div>
<div class="container">
<div class="row-1">Row 1</div>
<div class="main">main</div>
</div>
</main>
</body>
</html>