Как отрендерить это с помощью CSS-сетки?
Здравствуйте, может кто-нибудь помочь и рассказать мне, как это сделать с помощью CSS-сетки? На самом деле я сделал это с помощью jQuery, но я знаю, что, вероятно, смогу сделать это с помощью CSS-сетки. Я хочу, чтобы каждый второй элемент каждой строки был смещен.
Спасибо
Этот вопрос не отражает исследовательских усилий. Если у вас возникли проблемы, опубликуйте свое текущее предположение. Вам следует просмотреть Как создать минимальный, полный и проверяемый пример
Ожидается, что вы, по крайней мере, попытаетесь запрограммировать это для себя. Stack Overflow - это не сервис для написания кода. Я бы посоветовал вам сделать дополнительное исследование либо через Google, либо путем поиска SO, попробовать и. если у вас все еще есть проблемы, вернитесь с ваш код и объясните, что вы пробовали.
Это, безусловно, возможно с помощью CSS-Grid, но я подозреваю, что это не будет динамическим.
Ответы 1
Вы можете использовать .col: nth-child (2) для выбора второго столбца, если ваши столбцы разделены в строке div каждые 3 столбца.
Или вы можете использовать .nth-child (3n + 2), если все ваши столбцы находятся в одной строке div.
Дополнительная информация от w3schools
Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.
Столбцы нельзя выбрать (или даже не существует) с помощью CSS-Grid.
Спасибо вам за помощь ! codepen.io/DevillersJerome/pen/ZoErOe
Этого можно добиться, задав положительный
margin-topвместе с отрицательнымmargin-bottomравной длины.