Reputation: 5954
I've created a grid. However, for some reason all of the grid items are stacked in the bottom right corner, without any height or width, instead of assuming the value of the grid-area
property which has been assigned to them.
Of course I haven't yet given the grid items a height or width, but don't they assume the width and height of their corresponding grid area?
I'm fairly certain I've followed the Mozilla guide to a T. Not sure where I'm going wrong here. Any help would be greatly appreciated!
body {
width: 100vw;
height: 100vh;
margin: 0;
background: #0d0d0d;
}
#layout-grid {
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas:
c c c c a a a a
p p p p i i i i
p p p p i i i i
p p p p i i i i
p p p p i i i i
p p p p o o o o
p p p p o o o o
;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-gap: 2%;
box-sizing:border-box;
border:solid skyblue 3px;
}
#calender-navigation {
grid-area: c;
border:solid limegreen 3px;
background:limegreen;
}
#account-summary {
grid-area: a;
border:solid orange 3px;
background:orange;
}
#performance {
grid-area: p;
border:solid grey 3px;
background:grey;
}
#user-input {
grid-area: i;
border:solid blue 3px;
background:blue;
}
#positions {
grid-area: o;
border:solid red 3px;
background:red;
}
<div id="layout-grid">
<div id="calender-navigation"></div>
<div id="account-summary"></div>
<div id="performance"></div>
<div id="user-input"></div>
<div id="positions"></div>
</div>
Upvotes: 0
Views: 243
Reputation: 273010
You need to use " " with the value of grid-template-areas
as it's a string value in your case :
body {
width: 100vw;
height: 100vh;
margin: 0;
background: #0d0d0d;
}
#layout-grid {
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas:
"c c c c a a a a"
"p p p p i i i i"
"p p p p i i i i"
"p p p p i i i i"
"p p p p i i i i"
"p p p p o o o o"
"p p p p o o o o"
;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-gap: 2%;
box-sizing:border-box;
border:solid skyblue 3px;
}
#calender-navigation {
grid-area: c;
border:solid limegreen 3px;
background:limegreen;
}
#account-summary {
grid-area: a;
border:solid orange 3px;
background:orange;
}
#performance {
grid-area: p;
border:solid grey 3px;
background:grey;
}
#user-input {
grid-area: i;
border:solid blue 3px;
background:blue;
}
#positions {
grid-area: o;
border:solid red 3px;
background:red;
}
<div id="layout-grid">
<div id="calender-navigation"></div>
<div id="account-summary"></div>
<div id="performance"></div>
<div id="user-input"></div>
<div id="positions"></div>
</div>
Upvotes: 1