Блог

Главная - Вопросы по программированию - Как добавить содержимое в определенные столбцы сетки?

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

#html #css #css-grid

#HTML #css — файл #css-сетка #css

Вопрос:

Я создал 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>

Ответ №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>

Ответ №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>