CSS grid-template-areas 占用空间，即使列和行是空白的答案

【问题标题】：CSS grid-template-areas takes space even column and row is blankCSS grid-template-areas 占用空间，即使列和行是空白的
【发布时间】：2021-05-11 17:03:02
【问题描述】：

我有一个 NAV，其中包含要显示的条件项目。我使用 CSS 网格通过使用 grid-template-areas 来构建它。但是，当这些物品不可用时，它仍然为这些物品留出空间。我该如何避免这种情况。我不希望项目之间有任何空间。

注意：我知道我可以使用 grid-template-columns 但是，我想知道是否有使用 grid-template-areas 的方法。如果没有，我将使用网格模板列。另外，我不想使用任何条件类。

*{
  margin: 0;
  box-sizing: border-box;
}
nav{
  display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto 100px;
    grid-template-areas: "home prog learn contact login lang";
  background: skyblue;
  padding: 24px;
}
.home{
  grid-area: home;
}
.contact{
  grid-area: contact;
}.login{
  grid-area: login;
}
.prog{
 grid-area: prog;
 }
 .learn{
 grid-area: learn;
 }
 .lang{
 grid-area: lang;
 }

<nav>
  <a class="home">home</a>
  <!-- <a class="prog">Conditional NAV</a> -->
  <!-- <a class="learn">Conditional NAV</a> -->
  <a class="contact">contact</a>
  <a class="login">login</a>
  <!-- <a class="lang">Conditional NAV</a> -->
</nav>

【问题讨论】：

但是，我想知道是否有办法使用 grid-template-areas --> 答案是否定的
@TemaniAfif 很高兴知道。感谢您的回答。

标签： html css css-grid

【解决方案1】：

不要使用grid-template-areas，这些元素将就位。

* {
  margin: 0;
  box-sizing: border-box;
}

nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr);
  background: skyblue;
  padding: 24px;
  margin-bottom: 1em;
}

a {
  border: 1px solid red;
}

<nav>
  <a class="home">home</a>
  <a class="prog">Conditional NAV</a>
  <a class="learn">Conditional NAV</a>
  <a class="contact">contact</a>
  <a class="login">login</a>
  <a class="lang">Conditional NAV</a>
</nav>

<nav>
  <a class="home">home</a>
  <!-- <a class="prog">Conditional NAV</a> -->
  <!-- <a class="learn">Conditional NAV</a> -->
  <a class="contact">contact</a>
  <a class="login">login</a>
  <!-- <a class="lang">Conditional NAV</a> -->
</nav>

【讨论】：

您可以在前 4 个 minmax 调用中使用 repeat(4, minmax(0, 1fr)) 来简化 grid-template-columns。
感谢您的回答。我知道这种方式。但是，有没有办法只使用网格模板区域。
@amar grid-template-area 明确地具有特定和固定的区域，而您想要的是 not grid-template-area