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

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>