igorek-art 33 Опубликовано: 18 декабря 2023 Рассказать Опубликовано: 18 декабря 2023 Собственно пытаюсь разобраться с этим) Подскажите, как бы разобраться и как стилями описать следующее? Например, есть сайт шириной 500px (для примера), ширина задана через css. Внутри этого вывожу 50 ячеек шириной 10пикселей. Все эти данные в пикселях. Как это правильно написать, чтоб например при просмотре с мобилки с шириной экрана все те же самые 50 ячеек были в ряд но просто изменили масштаб до 3 пикселей ширины. Понимаете о чем речь? Если расмматривать в идеале картинку, то как создать блок (квадрат) например с 50 ячейками в ширину и высоту, чтоб при этом на мобиле под любым экраном эти 50 на 50 так же отображались в виде квадрата а не сползали или не смещались...? Пытаюсь вот Grid использовать но не получается чего-то.. Идея в том чтоб имея на компе блок 50 на 50 (каждая ячейка например 20 пикселей ширина, суммарно 1000) чтоб на смартфоне при ширине 400 пикселей вместились все эти же 50 блоков в ширину то есть имея ширину например 8 пикселей 1 блок... Надеюсь понятно объяснил) Цитата Ссылка на сообщение Поделиться на других сайтах
master27 38 Опубликовано: 19 декабря 2023 Рассказать Опубликовано: 19 декабря 2023 Хм. Поисковики вроде работают... Смотрите в сторону "viewport css" Цитата Ссылка на сообщение Поделиться на других сайтах
redissx 245 Опубликовано: 19 декабря 2023 Рассказать Опубликовано: 19 декабря 2023 (изменено) <div class="grid"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> ................... </div> ширина не нужна, создаем 50 равных частей с пропорцией 1 к 1 (квадрат). .grid {display: grid; grid-template-columns: repeat(50,1fr);} .cell {aspect-ratio: 1 / 1;} и для вашего сайта по соседству .cell a, .cell img {display: block; width: 100%; aspect-ratio: 1 / 1;} Изменено 19 декабря 2023 пользователем redissx Цитата Ссылка на сообщение Поделиться на других сайтах
igorek-art 33 Опубликовано: 19 декабря 2023 Рассказать Опубликовано: 19 декабря 2023 Автор 11 часов назад, redissx сказал: <div class="grid"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> ................... </div> ширина не нужна, создаем 50 равных частей с пропорцией 1 к 1 (квадрат). .grid {display: grid; grid-template-columns: repeat(50,1fr);} .cell {aspect-ratio: 1 / 1;} и для вашего сайта по соседству .cell a, .cell img {display: block; width: 100%; aspect-ratio: 1 / 1;} Спасибо, сейчас опробуемс) Цитата Ссылка на сообщение Поделиться на других сайтах
igorek-art 33 Опубликовано: 19 декабря 2023 Рассказать Опубликовано: 19 декабря 2023 (изменено) Автор 12 часов назад, redissx сказал: <div class="grid"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> ................... </div> ширина не нужна, создаем 50 равных частей с пропорцией 1 к 1 (квадрат). .grid {display: grid; grid-template-columns: repeat(50,1fr);} .cell {aspect-ratio: 1 / 1;} и для вашего сайта по соседству .cell a, .cell img {display: block; width: 100%; aspect-ratio: 1 / 1;} Попробовал, что то видимо у меня не так... Для примера исходник такой получается в итоге <div class="grid"> <div id='dle-content'> <div class="cell"> <a data-id="1" title="Блок 1"></a> </div> <div class="cell"> <a data-id="2" title="Блок 2"></a> </div> <div class="cell"> <a data-id="3" title="Блок 3"></a> </div> ...................... <div class="cell"> <a data-id="10000" title="Блок 10000"></a> </div> </div> </div> Класс стилей .grid {display: grid; grid-template-columns: repeat(100,1fr);} .cell {aspect-ratio: 1 / 1;} .cell a, .cell img {display: block; width: 100%; aspect-ratio: 1 / 1;} И вообще в принципе пустая страница получается хотя в коде исходном странички все есть.. Изменено 19 декабря 2023 пользователем igorek-art Цитата Ссылка на сообщение Поделиться на других сайтах
redissx 245 Опубликовано: 20 декабря 2023 Рассказать Опубликовано: 20 декабря 2023 Так конечно, добавлен <div id='dle-content'>. Он и становится 100 в ширину и все, больше ничего. Конкретно для кода выше должно быть так #dle-content {display: grid; grid-template-columns: repeat(100,1fr); grid-column: 1 / -1;} #dle-content > *:not(.cell) {grid-column: 1 / -1;} .cell {aspect-ratio: 1 / 1;} .cell a, .cell img {display: block; width: 100%; aspect-ratio: 1 / 1; height: auto;} Цитата Ссылка на сообщение Поделиться на других сайтах
igorek-art 33 Опубликовано: 20 декабря 2023 Рассказать Опубликовано: 20 декабря 2023 Автор 2 часа назад, redissx сказал: Так конечно, добавлен <div id='dle-content'>. Он и становится 100 в ширину и все, больше ничего. Конкретно для кода выше должно быть так #dle-content {display: grid; grid-template-columns: repeat(100,1fr); grid-column: 1 / -1;} #dle-content > *:not(.cell) {grid-column: 1 / -1;} .cell {aspect-ratio: 1 / 1;} .cell a, .cell img {display: block; width: 100%; aspect-ratio: 1 / 1; height: auto;} Спасибо, сейчас опробую. Этот контейнер dle частенько проблем доставляет 😁 Цитата Ссылка на сообщение Поделиться на других сайтах
igorek-art 33 Опубликовано: 20 декабря 2023 Рассказать Опубликовано: 20 декабря 2023 Автор 3 часа назад, redissx сказал: Так конечно, добавлен <div id='dle-content'>. Он и становится 100 в ширину и все, больше ничего. Конкретно для кода выше должно быть так #dle-content {display: grid; grid-template-columns: repeat(100,1fr); grid-column: 1 / -1;} #dle-content > *:not(.cell) {grid-column: 1 / -1;} .cell {aspect-ratio: 1 / 1;} .cell a, .cell img {display: block; width: 100%; aspect-ratio: 1 / 1; height: auto;} Да спасибо огромное все получилось! Осталось теперь придумать чем занять свободное место экрана на мобиле так как шаблон знатно сократился по высоте) Цитата Ссылка на сообщение Поделиться на других сайтах
igorek-art 33 Опубликовано: 27 декабря 2023 Рассказать Опубликовано: 27 декабря 2023 Автор 20.12.2023 в 08:10, redissx сказал: Так конечно, добавлен <div id='dle-content'>. Он и становится 100 в ширину и все, больше ничего. Конкретно для кода выше должно быть так #dle-content {display: grid; grid-template-columns: repeat(100,1fr); grid-column: 1 / -1;} #dle-content > *:not(.cell) {grid-column: 1 / -1;} .cell {aspect-ratio: 1 / 1;} .cell a, .cell img {display: block; width: 100%; aspect-ratio: 1 / 1; height: auto;} А не подскажете ли? Сейчас понадобилась для категории новостей то что не на главной а в категории задать ширину столбцов, но из за грида для id='dle-content' не получается.. А если например у меня внутри id='dle-content' новости другие выводятся классом toplist то как дописать чтоб эти новости в 2 колонки выводились? Как я понимаю что то сюда дописать? #dle-content > *:not(.cell) {grid-column: 1 / -1;} Цитата Ссылка на сообщение Поделиться на других сайтах
igorek-art 33 Опубликовано: 27 декабря 2023 Рассказать Опубликовано: 27 декабря 2023 Автор Вроде разобрался) Цитата Ссылка на сообщение Поделиться на других сайтах
igorek-art 33 Опубликовано: 11 февраля Рассказать Опубликовано: 11 февраля Автор Пытаюсь на новом проекте применить грид) Изучаю но до сих пор не понял.. А как задается высота блока? Например хотелось бы как то задать если ширина это 1Х то чтоб высота была например 1.25Х или это примерно само-собой подразумевается? Цитата Ссылка на сообщение Поделиться на других сайтах
redissx 245 Опубликовано: 13 февраля Рассказать Опубликовано: 13 февраля (изменено) grid-auto-rows высота блока https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows но если именно пропорция, то только через сам элемент https://doka.guide/css/aspect-ratio/ Изменено 13 февраля пользователем redissx Цитата Ссылка на сообщение Поделиться на других сайтах
igorek-art 33 Опубликовано: 13 февраля Рассказать Опубликовано: 13 февраля Автор 2 часа назад, redissx сказал: grid-auto-rows высота блока https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows но если именно пропорция, то только через сам элемент https://doka.guide/css/aspect-ratio/ Да уже разобрался и сделал, спасибо Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.