为什么我的空单元格不适用于 CSS 网格？ [复制]

Question

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

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

关键是：

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

为什么 . 没有应用空格？

Answer 1

你的意思是它没有应用空格？如果您在开发工具中签入，您可以看到最左边和最右边的列为它们保留了 20 像素。

我认为您打算做的是创建 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>