1

So this is the site in its newborn state, the site contains 4 columns and 5 rows. But still the first cell of line 2 ends up as cell 4 in row 1, and I can't see why... please help.

#maincontainer {
  display: grid;
  grid-template-columns: 0.5fr 2fr 2fr 0.5fr;
  grid-template-rows: 3.5em 10em 15em 20em 5em;
  grid-template-areas:
    "bluep toptext topnav bluep"
    ". logo search ."
    "jumboimage jumboimage jumboimage jumboimage"
    ". news schedule ."
    "footer footer footer footer";
  height: 100vh;
  width: 100vw;
}

.blue {
  grid-area: bluep;
  background-color: #0080bf;
}

.toptext {
  grid-area: toptext;
  background-color: #0080bf;
  text-align: center;
  align-items: center;
}

.topnav {
  grid-area: topnav;
  background-color: #0080bf;
}


/*# sourceMappingURL=second.css.map */
<div id="maincontainer">
  <div class="blue"></div>
  <div class="toptext">Text here</div>
  <div class="topnav">Nav here</div>
  <div class="blue"></div>
</div>

Please run it and you'll see what is wrong.

I am trying to build the first row, most left and right should just be blue background, left middle should have a text inside as the right middle. But no. They are way off and creating new cells and all. I've built many grids and never ever have I had a problem like this... so what have I done wrong? I should say that I am using sass so this is the compiled CSS.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
swe_mattias
  • 621
  • 1
  • 8
  • 15

1 Answers1

0

Areas defined in grid-template-areas should be continuous. One option is to create two separate areas:

#maincontainer {
  display: grid;
  grid-template-columns: 0.5fr 2fr 2fr 0.5fr;
  grid-template-rows: 3.5em 10em 15em 20em 5em;
  grid-template-areas:
    "blueR toptext topnav blueL"
    ". logo search ."
    "jumboimage jumboimage jumboimage jumboimage"
    ". news schedule ."
    "footer footer footer footer";
  height: 100vh;
  width: 100vw;
}

.blueR {
  grid-area: blueR;
  background-color: #0080bf;
}

.blueL {
  grid-area: blueL;
  background-color: #0080bf;
}

.toptext {
  grid-area: toptext;
  background-color: #0080bf;
  text-align: center;
  align-items: center;
}

.topnav {
  grid-area: topnav;
  background-color: #0080bf;
}
<div id="maincontainer">
  <div class="blueR"></div>
  <div class="toptext">Text here</div>
  <div class="topnav">Nav here</div>
  <div class="blueL"></div>
</div>

A better option is to make the bluep area span the entire column:

#maincontainer {
  display: grid;
  grid-template-columns: 0.5fr 2fr 2fr 0.5fr;
  grid-template-rows: 3.5em 10em 15em 20em 5em;
  grid-template-areas:
    "bluep toptext topnav ."
    ". logo search ."
    "jumboimage jumboimage jumboimage jumboimage"
    ". news schedule ."
    "footer footer footer footer";
  height: 100vh;
  width: 100vw;
}

.blue {
  grid-area: bluep
  grid-columns: 1 / span 4;
  background-color: #0080bf;
}

.toptext {
  grid-area: toptext;
  background-color: #0080bf;
  text-align: center;
  align-items: center;
}

.topnav {
  grid-area: topnav;
  background-color: #0080bf;
}


/*# sourceMappingURL=second.css.map */
<div id="maincontainer">
  <div class="blue"></div>
  <div class="toptext">Text here</div>
  <div class="topnav">Nav here</div>
  <div class="blue"></div>
</div>
Ori Drori
  • 183,571
  • 29
  • 224
  • 209