2

I have a CSS Grid, and my grid-template-areas property has . which don't seem to be applying white space. Why is this?

.nav {
  /*    padding: 1rem 1.75rem 0.1rem 1.75rem;*/
  text-align: center;
  font-size: 2rem;
  display: grid;
  width: 100%;
  grid-template-columns: 20px 1fr 1fr 1fr 1fr 20px;
  grid-template-areas: ". main blog work contact .";
  /*    grid-gap: 20px;*/
}


/*Nav li style removal*/

.nav li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline;
  text-decoration: none;
}


/*Nav link styling*/

ul {
  padding: 0;
}

.nav a {
  text-decoration: none;
  font-family: 'Monoton', cursive;
  color: #000;
  text-transform: uppercase;
}

#main-link {
  grid-area: main;
}

#blog-link {
  grid-area: blog;
}

#work-link {
  grid-area: work;
}

#contact-link {
  grid-area: contact;
}
<nav id="navigation">

  <ul class="nav">

    <li class="navbutton navhover"><a href="blogs.html" id="main-link">Main</a></li>
    <li class="navbutton navhover"><a href="blogs.html" class="currentlink" id="blog-link">Blog</a></li>
    <li class="navbutton navhover" id="work-link"><a href="work.html">Work</a></li>
    <li class="navbutton navhover" id="contact-link"><a href="contact.html">Contact</a></li>

  </ul>


</nav>

The key bit being:

grid-template-columns: 20px 1fr 1fr 1fr 1fr 20px;
grid-template-areas: ". main blog work contact .";

why are the .'s not applying white space?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Jamie Kane
  • 27
  • 5

1 Answers1

-1

What do you mean it is not applying whitespace? You can see that the left and right most columns have 20px reserved for them, if you check in the dev tool.

I think what you intend to do is to create a left and right margin of 20px. If that is the case, you don't even need to use grid to reserve that space: using horizontal margins of 20px should work:

.nav {
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-right: 20px;
}

See example:

.nav {
  /*    padding: 1rem 1.75rem 0.1rem 1.75rem;*/
  text-align: center;
  font-size: 2rem;
  display: grid;
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-right: 20px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "main blog work contact";
  /*    grid-gap: 20px;*/
}


/*Nav li style removal*/

.nav li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline;
  text-decoration: none;
}


/*Nav link styling*/

ul {
  padding: 0;
}

.nav a {
  text-decoration: none;
  font-family: 'Monoton', cursive;
  color: #000;
  text-transform: uppercase;
}

#main-link {
  grid-area: main;
}

#blog-link {
  grid-area: blog;
}

#work-link {
  grid-area: work;
}

#contact-link {
  grid-area: contact;
}
<nav id="navigation">

  <ul class="nav">

    <li class="navbutton navhover"><a href="blogs.html" id="main-link">Main</a></li>
    <li class="navbutton navhover"><a href="blogs.html" class="currentlink" id="blog-link">Blog</a></li>
    <li class="navbutton navhover" id="work-link"><a href="work.html">Work</a></li>
    <li class="navbutton navhover" id="contact-link"><a href="contact.html">Contact</a></li>

  </ul>


</nav>

Otherwise, you will have to use empty <li></li> elements in order to reserve that space, based on the grid-template-areas you've declared:

<ul class="nav">
    <li></li>
    <li class="navbutton navhover"><a href="blogs.html" id="main-link">Main</a></li>
    <li class="navbutton navhover"><a href="blogs.html" class="currentlink" id="blog-link">Blog</a></li>
    <li class="navbutton navhover" id="work-link"><a href="work.html">Work</a></li>
    <li class="navbutton navhover" id="contact-link"><a href="contact.html">Contact</a></li>
    <li></li>
</ul>

See example:

.nav {
  /*    padding: 1rem 1.75rem 0.1rem 1.75rem;*/
  text-align: center;
  font-size: 2rem;
  display: grid;
  width: 100%;
  grid-template-columns: 20px 1fr 1fr 1fr 1fr 20px;
  grid-template-areas: ". main blog work contact .";
  /*    grid-gap: 20px;*/
}


/*Nav li style removal*/

.nav li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline;
  text-decoration: none;
}


/*Nav link styling*/

ul {
  padding: 0;
}

.nav a {
  text-decoration: none;
  font-family: 'Monoton', cursive;
  color: #000;
  text-transform: uppercase;
}

#main-link {
  grid-area: main;
}

#blog-link {
  grid-area: blog;
}

#work-link {
  grid-area: work;
}

#contact-link {
  grid-area: contact;
}
<nav id="navigation">

  <ul class="nav">
    <!-- Unsemantic placeholder :( -->
    <li></li>
    
    <li class="navbutton navhover"><a href="blogs.html" id="main-link">Main</a></li>
    <li class="navbutton navhover"><a href="blogs.html" class="currentlink" id="blog-link">Blog</a></li>
    <li class="navbutton navhover" id="work-link"><a href="work.html">Work</a></li>
    <li class="navbutton navhover" id="contact-link"><a href="contact.html">Contact</a></li>

    <!-- Unsemantic placeholder :( -->
    <li></li>
  </ul>


</nav>
Terry
  • 63,248
  • 15
  • 96
  • 118
  • ah okay, so maybe my understanding of grid-template was wrong? i thought that it would apply the white space to the 20px column, then main would start from column 2 etc... but in the codepen it has main starting in column 1? Ive added a background color to the li's and now i can see that the blog li is overlapping the work li, when i'd have assumed they should be in separate columns, each 1fr width – Jamie Kane Jan 25 '18 at 14:04
  • @JamieKane Yup, that seems to be the case. In any way, you are assigning 20px of width to the first element, which is your "Main" link. That is not what you want to do. Just use margins. – Terry Jan 25 '18 at 14:05
  • Ok thanks for the advice, and I will use that method, but im still just not understanding why my current method doesnt work? – Jamie Kane Jan 25 '18 at 14:09
  • @JamieKane Your current method force the first grid item to have a width of 20px, that is why. You are declaring 7 grid items, the first and last ones being 20px. You have only 5 items in your `.nav`, so their widths will simply be `20px` and then `1fr`, with the last two widths not being used. – Terry Jan 25 '18 at 14:11
  • @Terry, the primary problem is that the anchor elements aren't even grid items. The grid properties applied to them are completely ignored. – Michael Benjamin Jan 25 '18 at 14:30
  • @Michael_B I don't think that's the issue at hand over here. – Terry Jan 25 '18 at 14:36
  • The first two grid areas (which are defined in the anchors) are completely ignored by the grid container. See my solution in the Q comments. – Michael Benjamin Jan 25 '18 at 14:37