为什么我的空单元格不能用于CSS网格？

Question

我有一个CSS网格，我的grid-template-areas属性.似乎没有应用空格。这是为什么？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

关键位是：

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

为什么。不应用空格？

Answer 1

你的意思是不应用空格？如果您检入开发工具，您可以看到左侧和右侧列为它们保留了20px。

我认为你打算做的是创建一个20px的左右边距。如果是这种情况，您甚至不需要使用网格来保留该空间：使用20px的水平边距应该有效：

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

参见示例：

.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>

否则，您必须使用空的<li></li>元素才能根据您声明的grid-template-areas保留该空格：

<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>

参见示例：

.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>