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

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

html css css-grid

23.04.2019 16:49

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

302

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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;
}

#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>

23.04.2019 16:53

Вы можете просто поместить первый 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>

23.04.2019 16:55

Другие вопросы по теме

Вордпресс. Добавить стили/класс, чтобы сделать кнопку в меню администратора отключенной (неактивной)

Как выделить абзацы при наведении с помощью псевдоэлемента

Использование одного и того же размера шрифта или ширины пикселей в Wicked pdf по-разному отображается в MAC и Ubuntu

Обновление JavaScript исчезает, когда оверлей скрыт

Как изменить значение translateX() свойства преобразования с помощью JavaScript?

Некоторые веса шрифтов не будут загружаться на мобильных устройствах с разными загрузками @font-face

Редактирование классов начальной загрузки

Стилизация раскрывающегося списка <select>

CSS в GTK - изменение цвета фона при нажатии кнопки

Как установить высоту на <ion-img>

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

Ответы 2

Другие вопросы по теме

Похожие вопросы