I'm trying to create a fairly simple site layout but being new to CSS Grid, I'm pretty sure I'm going about it the wrong way.
body{
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 120px 450px;
}
.header,
.main {
border: 1px solid black;
}
.side {
background-color: antiquewhite;
border-bottom: 1px solid black;
}
<div class="container">
<div class="side">Should have the same background color/gradient as header</div>
<header class="header">Header</header>
<div class="side">Should have the same background color/gradient as header</div>
<div class="side">Should have the same background color/gradient as Content</div>
<main class="main">Content</main>
<div class="side">Should have the same background color/gradient as Content</div>
</div>
This is sort of what I'm going for: a header and a main section, with the content of both kept to the center of the page - but at the same time I want the whole of both rows to have their own background colors. But my solution uses a bunch of unneeded divs and the use of grid-template-rows: 150px 450px; is wrong too since I want the content to take up the rest of the page not 450px.
How can I achieve this?
Try giving max-width and margin to the container class
.container{
max-width:calc( (3/5) * 100vw);
margin:0 auto;
grid-template-rows: 120px 1fr;
display:grid;
}
You can simplify like this:
body {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 3fr 1fr;
min-height:100vh;
background:
linear-gradient(red, blue) top/100% 120px no-repeat,
linear-gradient(green, grey) bottom/100% calc(100% - 120px) no-repeat;
}
body:before,
body:after{
content:"";
}
.container {
display: grid;
grid-template-rows: 120px 1fr;
}
.header,
.main {
border: 1px solid black;
}
<div class="container">
<header class="header">Header</header>
<main class="main">Content</main>
</div>
And if it's the only content you will have inside body you can also use max-width and vw unit like this:
body {
margin: 0;
padding: 0;
background:
linear-gradient(red, blue) top/100% 120px no-repeat, /*Cover the header*/
linear-gradient(green, grey) bottom/100% calc(100% - 120px) no-repeat; /*Cover the content*/
}
.container {
/* you want 1f 3fr 1fr so we have 5fr so we need (3/5)*/
max-width:calc( (3/5) * 100vw);
margin:auto;
display: grid;
grid-template-rows: 120px 1fr;
min-height:100vh;
}
.header,
.main {
border: 1px solid black;
}
<div class="container">
<header class="header">Header</header>
<main class="main">Content</main>
</div>
Try this one:
body {
margin: 0;
padding: 0;
}
div.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 150px; 1fr;
height: 100vh;
}
.header-container, .content-container {
display: contents;
}
.header-container div {
background: #ddd;
}
.content-container div {
background: #aaa;
}
<body>
<div class="container">
<div class='header-container'>
<div class='side'>Side</div>
<div class='header'>Header</div>
<div class='side'>Side</div>
</div>
<div class='content-container'>
<div class='side'>Side</div>
<div class='content'>Content</div>
<div class='side'>Side</div>
</div>
</div>
</body>
Related
here's my html code
<div>
<div id="navbar" class="box">Navbar</div>
<div id="sidenav " class="box">Side Navbar</div>
<div id="main " class="box">Main</div>
<div id="footer " class="box">Footer</div>
</div>
and here's my scss code
div{
display: grid;
width:100%;
height: 100%;
grid-template-columns: 25% 75% 25%;
grid-gap: 15px;
grid-template-rows:25% 50% 25% ;
// grid-gap: 15px;
grid-template-areas:
"hd hd hd "
"sd ma ma "
"ft ft ft ";
.box{
display: flex;
// text-align: center;
border: 3px solid red;
/* width:150px;
height: 150px; */
margin: auto;
align-items: center;
justify-content: center;
}
#navbar{
grid-area: hd;
}
#sidenav{
grid-area: sd;
}
#main{
grid-area: ma;
}
#footer{
grid-area: ft;
}
}
the problem is the footer div doesn't display in the bottom here's a screenshot
what i want is to make the footer display at the bottom so what seems to be the problem here
There are some issues that I found in your code which makes the layout little wonky.
grid-template-columns: 25% 75% 25%;
The column total is more than 100%, so it will not work perfectly.
I would highly recommend you to use a CSS grid generator online like https://grid.layoutit.com/
For your layout, I would also not recommend structure 3x3 (columns and rows) - As from the image you shared above it looks like the following
1 row - For "Navbar" (this doesnt need any sub columns)
1 row - For Content -> this has 2 columns 1 for "SideNav" and 1 for "Main"
1 row - For "Footer" (again you dont need sub columns)
Based on this your HTML structure will end up looking like
<div class="container">
<div class="navbar">Navbar</div>
<div class="Content">
<div class="SideNav">Side Nav</div>
<div class="Main">Main</div>
</div>
<div class="Footer">Footer</div>
</div>
And your CSS will look like this
body{
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 25% 50% 25%;
gap: 0px 0px;
grid-template-areas:
"navbar"
"Content"
"Footer";
}
.navbar {
grid-area: navbar;
background-color: #f5f5f5;
padding: 16px;
text-align: center;
}
.Content {
display: grid;
grid-template-columns: 360px 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas:
"SideNav Main";
grid-area: Content;
}
.SideNav {
grid-area: SideNav;
background-color: #e5e5e5;
padding: 16px;
}
.Main {
grid-area: Main;
background-color: salmon;
padding: 16px;
}
.Footer {
grid-area: Footer;
background-color: #d5d5d5;
padding: 16px;
text-align: center;
}
Here, if you check the code well, the container has 3 rows (25% - navbar, 50% - content, 25% - footer)
And then content has 2 columns (360px - Sidenav, 1fr - Main)
Hope this helps :)
You can also see the code live on my codepen : https://codepen.io/raunaqpatel/pen/WNyQqmm
Or here:
body{
padding: 0;
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 25% 50% 25%;
gap: 0px 0px;
grid-template-areas:
"navbar"
"Content"
"Footer";
}
.navbar {
grid-area: navbar;
background-color: #f5f5f5;
padding: 16px;
text-align: center;
}
.Content {
display: grid;
grid-template-columns: 360px 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas:
"SideNav Main";
grid-area: Content;
}
.SideNav {
grid-area: SideNav;
background-color: #e5e5e5;
padding: 16px;
}
.Main {
grid-area: Main;
background-color: salmon;
padding: 16px;
}
.Footer {
grid-area: Footer;
background-color: #d5d5d5;
padding: 16px;
text-align: center;
}
<div class="container">
<div class="navbar">Navbar</div>
<div class="Content">
<div class="SideNav">Side Nav</div>
<div class="Main">Main</div>
</div>
<div class="Footer">Footer</div>
</div>
HTML
<div class="parent">
<div class="content">
<div>
<div style="width: 100%;height: 100%">
<div class="grid grid-template" style="background:blue;">
The display grid will be smaller or fitted on the parent div. but instead it will fitted on the parent it overlapped which is wrong. how to fix on it?
</div>
</div>
</div>
</div>
</div>
CSS
/* don't remove anything here */
.parent {
display: block;
width: 452px;
height: 1038px;
background: red;
}
.content {
width: auto;
display: inline-block;
transform-origin: 0px 0px 0px;
transform: matrix(1.51042, 0, 0, 1.51042, 0, 0);
}
.grid {
height: calc(100% - 35px);
display: grid;
gap: 1px 1px;
background: blue;
grid-template-columns: 1fr 1fr 1fr; /* don't replace the value */
grid-template-rows: 1fr 1fr 1fr; /* don't replace the value */
grid-template-areas:
"LINE3flr LINE1flr LINE1flr"
"LINE3flr LINE1flr LINE1flr"
". . ."; /* don't replace the value */
}
The display grid will be smaller or fitted on the parent div. but instead, it will be fitted on the parent it overlapped which is wrong. how to fix it? it should be fit on the parent div.
Example:
http://jsfiddle.net/tavfbd2o/
Are you going to do like this one?
.parent {
display: block;
width: 452px;
height: 1038px;
background: red;
}
.content {
width: 100%;
height: 100%;
}
.grid {
height: calc(100% - 35px);
display: grid;
margin: auto;
gap: 1px 1px;
grid-template-columns: 1fr 1fr 1fr; /* don't replace the value */
grid-template-rows: 1fr 1fr 1fr; /* don't replace the value */
grid-template-areas:
"LINE3flr LINE1flr LINE1flr"
"LINE3flr LINE1flr LINE1flr"
". . ."; /* don't replace the value */
}
<div class="parent">
<div class="content">
<div style="width: 100%;height: 100%">
<div class="grid grid-template" style="background: blue;">
The display grid will be smaller or fitted on the parent div. but instead it will fitted on the parent it overlapped which is wrong. how to fix on it ?
</div>
</div>
</div>
</div>
I'm learning CSS Grid layout and i have a problem about positioning.
What i want is to create a page layout composed by a left-side menu, top-bar menu and a main content page like the image below:
I have been able to achieve the goal, but now i want to fix the position of the top bar and sidebar while main content is scrolling.
I set position:sticky to both containers but it does not working.
How can i fix?
Here is my code:
* {
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.grid-container {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 10% 100vh;
grid-template-areas:
"LeftMenu TopMenu"
"LeftMenu Main";
}
.LeftMenu {
background-color: #a4a4a4;
grid-area: LeftMenu;
width: 200px;
height: 100%;
}
.TopMenu {
background-color: #d49494;
grid-area: TopMenu;
width: 100%;
height: 100%;
display: flex;
}
.Main {
background-color: #8990eb;
grid-area: Main;
width: 100%;
height: 100vh;
}
<div class="xdg-component-appnav-menu">
<div class="grid-container">
<div class="LeftMenu">left menu</div>
<div class="TopMenu">top menu</div>
<div class="Main">
<p style="padding-bottom: 1000px;">Content</p>
</div>
</div>
</div>
You don't need position: sticky. It's extra complication and still isn't fully supported by some browsers.
Just use overflow: auto on the main container.
.grid-container {
display: grid;
height: 100vh;
grid-template-columns: 200px 1fr;
grid-template-rows: 10% 90%;
grid-template-areas:
"LeftMenu TopMenu"
" LeftMenu Main ";
}
.LeftMenu {
grid-area: LeftMenu;
background-color: #a4a4a4;
}
.TopMenu {
grid-area: TopMenu;
background-color: #d49494;
}
.Main {
grid-area: Main;
overflow: auto; /* key adjustment */
background-color: #8990eb;
}
body {
margin: 0;
}
<div class="xdg-component-appnav-menu">
<div class="grid-container">
<div class="LeftMenu">left menu</div>
<div class="TopMenu">top menu</div>
<div class="Main">
<p style="height: 1000px;">Content</p>
</div>
</div>
</div>
I have a container div that has a header, a content area and a footer. And I want the footer to always be stuck to the bottom, while the content area always fills the remaining space. And I don't know how to do that.
This is what I have currently:
.container {
display: grid;
/*position: relative;*/
grid-template-columns: 1fr;
border: 1px solid black;
}
.header {
background-color: yellow;
display: grid;
grid-template-columns: 3fr 3fr 3fr 1fr;
padding: 10px 0;
}
.content {
background-color: teal;
position: relative;
display: grid;
grid-template-columns: 1fr 7fr 1fr;
padding: 15px 20px 20px 0;
min-height: 100%;
}
.footer {
background-color: maroon;
position: absolute;
width: 100%;
bottom: 0;
}
<div class="container">
<div class="header">This is a header.</div>
<div class="content">This is a content area.</div>
<div class="footer">This is a footer.</div>
</div>
As you can see, the content section doesn't stretch all the way to the footer section. What am I missing here?
Thanks!
Use grid-template-rows: auto 1fr auto; - this way footer and header will take only space that they need, and content will take everything else. Also, remove position: absolute; from footer to make it a grid-item.
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
border: 1px solid black;
min-height: 100vh;
}
.header {
background-color: yellow;
padding: 10px 0;
}
.content {
background-color: teal;
padding: 15px 20px 20px 0;
min-height: 100%;
}
.footer {
background-color: maroon;
width: 100%;
}
<div class="container">
<div class="header">This is a header.</div>
<div class="content">This is a content area.</div>
<div class="footer">This is a footer.</div>
</div>
<script>
$(document).ready(function(e) {
var h = $( window ).height();
$('.container').css('max-height', h-220+'px');
});
</script>
This is for container height if your footer height is 220px. You can change the height as per your need.
<style>
.footer{ bottom:0; position:fixed; }
</style>
This is for footer to fixed at bottom.
I have a problem with making spaces between grid elements. This is my HTML code:
<div class="container">
<div class="col">Hello1</div>
<div class="col">Hello2</div>
<div class="col">Hello3</div>
<div class="col">Hello4</div>
</div>
And this is my CSS code:
body {
background-color: green;
}
.col {
margin: 0 2vw;
padding: 1vh 1vw;
}
.container {
width: 80vw;
margin: 0 auto;
display: grid;
grid-template-columns: 25% 25% 25% 25%;
background-color: maroon;
}
I have used this layout before, and it has worked just fine, but for some reason this doesn`t work now. I want to make space between each of the four columns, and make that space the same colour of the background color (in this case green).
Use grid gap for spacing and move the background color to grid item instead of grid container so you can see the gap:
body {
background-color: green;
}
.col {
padding: 1vh 1vw;
background-color: maroon;
}
.container {
width: 80vw;
margin: 0 auto;
display: grid;
grid-gap:2vw;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
<div class="container">
<div class="col">Hello1</div>
<div class="col">Hello2</div>
<div class="col">Hello3</div>
<div class="col">Hello4</div>
</div>