Чередование строк с использованием css-сеток и nth-child

Я работаю над сеткой продуктов с чередующимся рисунком строк, подобным этому.
Контейнеры цвета представляют то, как, по моему мнению, должны выглядеть строки.

В основном есть два продукта в первом ряду и один продукт во втором ряду, повторяющиеся бесконечно. Я пытался сделать это с помощью css grids + nth child, но, похоже, у меня не получается. Вот что у меня есть до сих пор:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: 0;
  width: 70vw;
  margin: 0 auto;
}

.item:nth-child(3n+3) {
  grid-column: auto / span 2;
  background-color: #e2a7de;
}

/*just for debugging*/
.container{grid-gap:5px;}
.item{background-color: #ffa900;padding: 10px;text-align:center;}

<div class = "container">
  <div class = "item">
    X
  </div>
  <div class = "item">
    X
  </div>
  <div class = "item">
    X
  </div>
  <div class = "item">
    X
  </div>
  <div class = "item">
    X
  </div>
</div>

Мой мозг не может объединить сетки и nth-child для создания этого макета. Я также открыт для лучшего способа создания этого шаблона 2-1-2, если у кого-то есть другие предложения. Спасибо!

css css-selectors css-grid

17.09.2022 04:07

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

111

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

Ответы 2

Обновите grid-template-columns, чтобы он стал 1fr 1fr

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0;
  width: 70vw;
  margin: 0 auto;
}

.item:nth-child(3n+3) {
  grid-column: auto / span 2;
  background-color: #e2a7de;
}


/*just for debugging*/
.container{grid-gap: 5px;}.item {background-color: #ffa900;padding: 10px;text-align: center;}

<div class = "container">
  <div class = "item">
    X
  </div>
  <div class = "item">
    X
  </div>
  <div class = "item">
    X
  </div>
  <div class = "item">
    X
  </div>
  <div class = "item">
    X
  </div>
</div>

17.09.2022 04:25

Ответ принят как подходящий

Вы можете упростить свой код, как показано ниже:

.container {
  display: grid;
  grid-auto-columns: 1fr; /* all columns equal */
  width: 70vw;
  margin: 0 auto;
}

.item:nth-child(3n) {
  grid-column: span 2; /* span and create two columns*/
  background-color: #e2a7de;
}

/*just for debugging*/
.container{grid-gap:5px;}
.item{background-color: #ffa900;padding: 10px;text-align:center;}

<div class = "container">
  <div class = "item">
    X
  </div>
  <div class = "item">
    X
  </div>
  <div class = "item">
    X
  </div>
  <div class = "item">
    X
  </div>
  <div class = "item">
    X
  </div>
</div>

17.09.2022 10:49

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

Выполнение парсинга веб-страниц с помощью селена на influenster.com. Я получаю только один удаленный отзыв, хотя он был в цикле, и xpath был правильным

Исключение в потоке «основной» org.openqa.selenium.WebDriverException: неизвестная ошибка: неожиданный ответ на команду с использованием Selenium Java

Изменить белый фон изображения по умолчанию

Beautifulsoup выбирает элемент на основе innerHTML с помощью Python

Есть ли способ сделать так, чтобы стиль селектора ":active" применялся к текущему наведенному элементу, когда мышь перемещается между элементами

Требуется ли неявный стиль тега h2, даже если его родительский элемент div уже имеет стиль для выравнивания по центру?

Селекторы слияния sass на амперсанд

Xpath для извлечения текста в селене

CSS. Как разделить список <li> на 3 столбца с помощью li:nth-child?

Применить стили ко всем таблицам, кроме одной

Чередование строк с использованием css-сеток и nth-child

Ответы 2

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

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