如何向特定网格列添加内容？

Question

我在CSS网格布局中创建了6列。我有一个列表中的4个项目，但希望将项目放在2-5列中。我该怎么做呢？

​

#wrapper {
  display: grid;
  grid-gap: 20px;
}

#portfolio-nav ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  padding: 0;
  list-style: none;
}

<div class="wrapper">
  <div id="portfolio-nav">
    <ul>
      <li><a href="#">ALL</a></li>
      <li><a href="#">Advert/Flyers</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Videos</a></li>
    </ul>
  </div>
</div>

​

Answer 1

您可以添加一个伪元素，该元素将放置在第一列中，将另一列推送到从第二列开始：

​

#wrapper {
  display: grid;
  grid-gap: 20px;
}

#portfolio-nav ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  padding: 0;
  list-style: none;
}

#portfolio-nav ul:before {
  content: "";
}

<div class="wrapper">
  <div id="portfolio-nav">
    <ul>
      <li><a href="#">ALL</a></li>
      <li><a href="#">Advert/Flyers</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Videos</a></li>
    </ul>
  </div>
</div>

​

或者，您可以将第一个元素从第二列开始，另一个元素如下所示：

​

#wrapper {
  display: grid;
  grid-gap: 20px;
}

#portfolio-nav ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  padding: 0;
  list-style: none;
}

#portfolio-nav ul > :first-child {
  grid-column:2;
}

<div class="wrapper">
  <div id="portfolio-nav">
    <ul>
      <li><a href="#">ALL</a></li>
      <li><a href="#">Advert/Flyers</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Videos</a></li>
    </ul>
  </div>
</div>

​

还可以修改网格定义，如下所示：

​

#wrapper {
  display: grid;
  grid-gap: 20px;
}

#portfolio-nav {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
}
#portfolio-nav ul {
  display: grid;
  grid-column:2;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  padding: 0;
  list-style: none;
}

<div class="wrapper">
  <div id="portfolio-nav">
    <ul>
      <li><a href="#">ALL</a></li>
      <li><a href="#">Advert/Flyers</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Videos</a></li>
    </ul>
  </div>
</div>

​

还可以考虑填充以替换空列：

​

#wrapper {
  display: grid;
  grid-gap: 20px;
}

#portfolio-nav ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding:0 calc(100%/6);
  text-align: center;
  list-style: none;
}

<div class="wrapper">
  <div id="portfolio-nav">
    <ul>
      <li><a href="#">ALL</a></li>
      <li><a href="#">Advert/Flyers</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Videos</a></li>
    </ul>
  </div>
</div>

​

Answer 2

您可以使用li将第一个grid-column: 2放在第二列中-参见下面的演示：

​

#wrapper {
  display: grid;
  grid-gap: 20px;
}

#portfolio-nav ul {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  padding: 0;
  list-style: none;
}

ul li:first-child {
  grid-column: 2; /* added */
}

<div class="wrapper">
  <div id="portfolio-nav">
    <ul>
      <li><a href="#">ALL</a></li>
      <li><a href="#">Advert/Flyers</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Videos</a></li>
    </ul>
  </div>
</div>

​