oldboy
oldboy

Reputation: 5954

Why are grid items stacked in corner?

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!

Here is an MVP.

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

Answers (1)

Temani Afif
Temani Afif

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

Related Questions