Как сверстать грид в гриде с динамической шириной и переносом карточек?

Евгений Журов,

(которая тоже на разных брейкпоинтах разная)

К счастью есть кастомные свойства.

Еще есть вот такое https://css-live.ru/articles/resheno-s-pomoshhyu-c...
Но в вашем случае не поможет, слишком много неизвестных.
И пришли бы в итоге к JS.

я в итоге сказал дизайнеру, что он придумал дичь, и мы решили отказаться от этой идеи))

Какой покладистый. Повезло вам :)

Как сверстать грид в гриде с динамической шириной и переносом карточек?

Евгений Журов, я бы попробовала пересчитать ваши 25% на vw
И что-нибудь типа auto-fill

Как сверстать грид в гриде с динамической шириной и переносом карточек?

Кажется, нужно начать расписывать условия.
Сначала по-русски. И с картинками.

Если будет 2 дочерних .grid-element, в одном 5 .grid-card, в другом 3.
Как это должно выглядеть?

Как центровать без смешение position: absolute;?

oink, этого уже очень мало, но зато можно встретить в существующих проектах. Так что, да, знать и понимать нужно, конечно.

Как закреплять блоки, когда доскролили к ним?

Расскажите, почему не подходит sticky?

Может такое быть чтобы изображение для телефона было одно а для декстопа иначе?

Dunhil, вы посмотрите как выглядит ваш вопрос и какой код вы в него вставляли на самом деле. Браузер сожрал часть ваших тегов, а отобразил вообще только текст.
Чтобы он показывал код нормально, нужно пользоваться тегами <code></code>
Можете просто принять мою правку вопроса.

Правил у ресурса не так много, имеет смысл их прочитать, вы же сами будете получать более полные и подходящие ответы.
А не как сейчас, про фон вместо контентной картинки из-за неверного форматирования вопроса.

Может такое быть чтобы изображение для телефона было одно а для декстопа иначе?

У автора в вопросе <img>, просто он не умеет вставлять код

Как центровать без смешение position: absolute;?

Muslim Mamaev, полчаса назад код в комментариях написала...

Может такое быть чтобы изображение для телефона было одно а для декстопа иначе?

Используйте тег code для вставки кода.

Для смены порядка отображения используется order в гридах и флексах.

Для разных изображений на разной ширине используется тег <picture>

Как центровать без смешение position: absolute;?

Так https://jsfiddle.net/5hrybcf0/

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

Как центровать без смешение position: absolute;?

Рекомендую запомнить метод, если продолжите заниматься версткой, этим трюком придется пользоваться тысячи раз.

Можно забить на этот метод и перестать использовать абсолюты, где не нужно.
Уже некоторое время есть гриды.

Как сделать обновление переменной в моем случае?

Дима Клепко,

Ну если я нажимаю на #img1, происходит событие это должно считываться в slider, а он должен указывать в себя новое значение, а это не происходит

Логично. Потому что вы сказали, что slider это константа, она не меняется. Почитайте про var, let и const. Они в любом случае встретятся в вашей жизни.

Вы написали прекрасный скрипт, но есть вопрос: а если слайдов будет 15, так и будете для каждого отдельно клики прописывать? А потом, если потребуется добавить ещё один, то нужно будет снова открыть js и поправить скрипт? Тут в соседнем вопросе один деятель на CSS ваяет слайдер из десятка слайдов, вы тоже можете без JS обойтись :)

Вам нужно почитать про циклы, про добавление и удаление классов (чтобы не писать стили в JS), querySelector и querySelectorAll и т.д.

Т.е. вместо 3х отдельных img1, img2 и img3 у вас должно быть:
const slides = document.querySelectorAll('.slide')
предварительно всем слайдам раздать нужный класс в разметке.
Аналогично с кнопками.
Потом в цикле перебираете кнопки и соответствующим слайдам задаете класс типа .active у остальных убираете.

Объясните работу слайдера?

alexmaj467,

И сделать его таким-же коротким при моей структуре html не возможно ?

Без JS нет.

У вас чем больше слайдов, тем больше мороки. Добавление нового слайда требует изменений в стилях. На вообще JS без разницы сколько их.

Как можно указать плотность пикселя?

wakenbyWork, давайте я вас научу.
Открываете инструменты разработчика, адаптивный режим, меняете плотность пикселей и на вкладке Network смотрите что и когда загружается.
Развлекайтесь.

Объясните работу слайдера?

Не нужно писать самому себе в поле для ответов. Можно редактировать вопрос или писать в комментариях.

Там, в комментариях, я вам и написала

Объясните работу слайдера?

alexmaj467, В вашем первом примере это сделано с помощью длинной колбасы со слайдами, которая сдвигается в overflow контейнере.
С телефона не посмотреть, что там точно было, но что-то вроде того:

Когда активен первый слайд, полоса в 0,когда второй сдвинута на высоту слайда, когда третий, то на две высоты слайда и т. д.

Или аналогичная логика.

Можете попробовать поиграть в @keyframes, чтобы слайд уезжал и с какой-то задержкой приезжал обратно с прозрачностью. Но не уверена, что анимации двух слайдов гарантировано состыкуются.

Пробовать даже не хочу, потому что это ваше развлечение.

Когда надоест, возьмите swiper.js

Как можно указать плотность пикселя?

Поменять 2 на 3.
Или или добавить для 3 по аналогии.

Только зачем вы два раза про дефолтные написали не вполне ясно, лишний source можете убрать.

Как запретить выполнение события при клике по дочернему элементу?

Davidaa_WoW, ну ок, они хотят лупу и крест не фоном и контентом, а псевдо.
Одна кнопка с псевдо и лупой, другая с псевдо и крестом.

Как запретить выполнение события при клике по дочернему элементу?

Davidaa_WoW, можно весь текст задания?

Потому что сейчас вы предлагаете ловить клик по псевдо, а так не работает.

Как привязать событие по классу к нескольким элементам html?

const cards = document.querySelectorAll('.card__inner');

cards.forEach(card => card.addEventListener('click', function() {
  card.classList.toggle('is-flipped');
}))