Как добавить контент в определенные столбцы сетки?

Question

Я создал 6 столбцов в макете CSS Grid. У меня есть 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>