This question already has an answer here:
Why are CSS named grid areas not in quotes?
(1 answer)
Closed 2 years ago.
This may be obvious but I have been stuck on it for a while and have searched stackoverflow to no avail.
Everywhere I have a grid-area value I am getting "invalid property value" in google chrome when looking at the elements.
The content is simply being placed in the 3rd grid item on the left when it should be in the 4th.
.dashboard {
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 50px auto;
grid-template-areas:
"left top"
"left content";
height: 100vh;
}
.left-nav {
grid-area: "left";
}
.top-nav {
grid-area: "top";
}
.content {
grid-area: "content";
}
<div class="dashboard">
<div class="left-nav">
LEFT
<app-left-nav></app-left-nav>
</div>
<div class="top-nav">
TOP
<app-top-nav></app-top-nav>
</div>
<div class="content">
CONTENT
<router-outlet></router-outlet>
</div>
</div>
You should have the attribute value without quotes grid-area: top;:
.dashboard {
display: grid;
grid-template-areas:
'left top'
'left content';
height: 100vh;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.dashboard > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.left-nav {
grid-area: left;
}
.top-nav {
grid-area: top;
}
.content {
grid-area: content;
}
<div class="dashboard">
<div class="left-nav">
LEFT
<app-left-nav></app-left-nav>
</div>
<div class="top-nav">
TOP
<app-top-nav></app-top-nav>
</div>
<div class="content">
CONTENT
<router-outlet></router-outlet>
</div>
</div>
Related
This question already has an answer here:
Why are CSS named grid areas not in quotes?
(1 answer)
Closed 7 months ago.
I'm trying to create a grid layout with two boxes that I want to be in one line.
the result was :
.container {
display: grid;
grid-template-areas: "1 2 2";
}
.sidebar {
background-color: aqua;
grid-area: 1;
height: 50vh;
}
.content {
background-color: black;
grid-area: 2;
height: 50vh;
}
<div class="container">
<div class="sidebar"></div>
<div class="content"></div>
</div>
why it doesn't follow the template I designated
If you want to use numbers you need to prefix them with \3 but I don't really recommend
.container {
display: grid;
grid-template-areas: "1 2 2";
}
.sidebar {
background-color: aqua;
grid-area: \31;
height: 50vh;
}
.content {
background-color: black;
grid-area: \32;
height: 50vh;
}
<div class="container">
<div class="sidebar"></div>
<div class="content"></div>
</div>
I don't believe you can use unescaped numbers as grid area names.
Just use letters instead.
.container {
display: grid;
grid-template-areas: "a b b"
}
.sidebar {
background-color: aqua;
grid-area: a;
height: 50vh;
}
.content {
background-color: black;
grid-area: b;
height: 50vh;
}
<div class="container">
<div class="sidebar">
</div>
<div class="content"></div>
</div>
This question already has answers here:
Centering in CSS Grid
(9 answers)
Closed 7 months ago.
I have this in html
body {
margin: 10px;
text-align: center;
width: 380px;
}
.row {
display: grid;
grid-template-columns: 180px 180px 180px 180px;
grid-gap: 10px;
}
.item {
color: white;
padding: 1.5em 0;
font-size: 2em;
justify-content: center;
}
.a {
background: #0d9;
}
.b {
background: #d90;
}
.c {
background: #9d0;
}
.d {
background: #90d;
}
.e {
background: #d09;
}
.f {
background: #09d;
}
.g {
background: #09d;
}
.h {
background: #09d;
}
<div class="row">
<!--main divs-->
<div class="item a" id="adventureHolidays">
<p>Adventure Holidays</p>
</div>
<div class="item b" id="backpacking">
<p>Backpacking</p>
</div>
<div class="item c" id="cruiseHolidays">
<p>Cruise Holidays</p>
</div>
<div class="item d" id="eventTravel">
<p>Event Travel</p>
</div>
<div class="item e" id="packageHoliday">
<p>Package Holiday</p>
</div>
<div class="item f" id="safari">
<p>Safari</p>
</div>
<div class="item g" id="skiingAndSnowboarding">
<p>Skiing and Snowboarding</p>
</div>
<div class="item h" id="volunteering">
<p>Volunteering</p>
</div>
</div>
I tried a lot of tricks from already asked questions here and no one works for me, every time my grid is or bad positioned or nothing changed. I tried with place-items: center; but then I don't have gap between them, also tried with justify-content: center; but then all my divs are one below other. And also, How I can put it a bit down? Any help?
Use the following CSS:
body {
margin: 10px;
text-align: center;
width: 100%;
display: flex;
justify-content: center;
}
Add the following CSS:
.item {
display: grid;
}
.item p {
margin: auto;
}
MCVE
I would like to nest a grid within another grid, and have a tall content box within the nested grid's content div. However no matter I set the overflow property of this content div to scroll, the content box grows causing the outer grid to exceed the viewport. So the viewport gets a scrollbar. The scrollbar of the content div is present but disabled.
// html
<div class="outergrid">
<div class="row1">
Outer Grid Header
</div>
<div class="row2">
<div class="header">
Inner Grid Header
</div>
<div class="box">
Tall Box
</div>
</div>
</div>
// style scss
*{
padding: 0px;
margin: 0px;
}
.outergrid {
display: grid;
grid-template-rows: 50px 100%;
grid-gap: 10px;
background-color: #0ff;
div {
background-color: #afa;
}
}
.row1{
grid-row: 1;
}
.row2{
grid-row: 2;
display: grid;
grid-template-rows: 50px 100%;
grid-gap: 5px;
.header {
grid-row: 1;
background-color: #ffa;
}
.contentbox {
grid-row: 2;
overflow: scroll;
.tallcontent {
background-color: #89f;
height: 1000px;
}
}
}
screenshot highlighting the problem
If I understood you correctly, then perhaps this solution (pure CSS, without SCSS) below can help you. The solution is to enforce a constraint on the height of the parent elements.
* {
padding: 0px;
margin: 0px;
}
.outergrid {
--grid-gap: 10px;
display: grid;
grid-template-rows: 50px calc(100% - 50px - var(--grid-gap));
grid-gap: var(--grid-gap);
background-color: #0ff;
max-height: 100vh;
}
.outergrid div {
background-color: #afa;
}
.row1 {
grid-row: 1;
}
.row2 {
--grid-gap: 5px;
grid-row: 2;
display: grid;
max-height: 100%;
grid-template-rows: 50px calc(100% - 50px - var(--grid-gap));
grid-gap: var(--grid-gap);
}
.row2 .header {
grid-row: 1;
background-color: #ffa;
}
.row2 .contentbox {
grid-row: 2;
overflow: scroll;
}
.row2 .contentbox .tallcontent {
background-color: #89f;
height: 1000px;
}
<div class="outergrid">
<div class="row1">
Outer Grid Header
</div>
<div class="row2">
<div class="header">
Inner Grid Header
</div>
<div class="contentbox">
<div class="tallcontent">
Tall Content
</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>
This question already has answers here:
Centering in CSS Grid
(9 answers)
Grid properties not working on elements inside grid container
(1 answer)
Closed 4 years ago.
I'm trying to create a website layout using CSS grid and most content is manipulated as expected using align/justify-self but two or three areas aren't but I don't know why. They are 'Nav' and 'subhead'.
I don't know how to post this with less code and still have it demonstrate other areas of code that may be causing conflict or other reasons for it to not work. For some reason I have to post more information here before I am allowed to post this question so I am writing rubbish until it will allow me to post.
.gridcontainer {
display: grid;
grid-gap: 5px 0px;
grid-template-rows: 75px 75px 230px 750px 75px;
grid-template-columns: 230px 570px;
grid-template-areas: "banner subhead" "nav nav" "pic about" "left right" "footer footer";
width: 80%;
margin: 0px auto;
overflow: hidden;
}
.banner {
grid-area: banner;
justify-self: start;
align-self: center;
height: 100%;
width: 100%;
}
.subhead {
grid-area: subhead;
align-self: center;
justify-self: start;
font-size: 15px;
}
.nav {
grid-area: nav;
align-self: center;
background-color: #5c5858;
font-size: 15px;
height: 100%;
width: 100%;
}
a {
color: white;
padding: 0px 30px;
}
.pic {
grid-area: pic;
background-color: #e4d1d1;
}
<div class="gridcontainer">
<div class="banner">
<h1>Your Logo</h1>
</div>
<div class="subhead">
I can't get this to align.
</div>
<div class="pic">
Image of plane
</div>
<div class="nav">
I can't get this to align.
</div>
<div class="about">
<h1>About</h1>
</div>
</div>