А вы пробовали Grid?

[igorek-art 35]

Собственно пытаюсь разобраться с этим) Подскажите, как бы разобраться и как стилями описать следующее? Например, есть сайт шириной 500px (для примера), ширина задана через css. Внутри этого вывожу 50 ячеек шириной 10пикселей. Все эти данные в пикселях. Как это правильно написать, чтоб например при просмотре с мобилки с шириной экрана все те же самые 50 ячеек были в ряд но просто изменили масштаб до 3 пикселей ширины. Понимаете о чем речь? Если расмматривать в идеале картинку, то как создать блок (квадрат) например с 50 ячейками в ширину и высоту, чтоб при этом на мобиле под любым экраном эти 50 на 50 так же отображались в виде квадрата а не сползали или не смещались...? Пытаюсь вот Grid использовать но не получается чего-то.. Идея в том чтоб имея на компе блок 50 на 50 (каждая ячейка например 20 пикселей ширина, суммарно 1000) чтоб на смартфоне при ширине 400 пикселей вместились все эти же 50 блоков в ширину то есть имея ширину например 8 пикселей 1 блок... Надеюсь понятно объяснил)

[master27 41]

Хм. Поисковики вроде работают...
Смотрите в сторону "viewport css"

[redissx 254]

					<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 35]

  19.12.2023 в 08:38, 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 35]

  19.12.2023 в 08:38, 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 254]

Так конечно, добавлен <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 35]

  20.12.2023 в 05: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;}

 

Расширить  

Спасибо, сейчас опробую. Этот контейнер dle частенько проблем доставляет 😁

[igorek-art 35]

  20.12.2023 в 05: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;}

 

Расширить  

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

[igorek-art 35]

  20.12.2023 в 05: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 35]

Вроде разобрался)

[igorek-art 35]

Пытаюсь на новом проекте применить грид) Изучаю но до сих пор не понял.. А как задается высота блока? Например хотелось бы как то задать если ширина это 1Х то чтоб высота была например 1.25Х или это примерно само-собой подразумевается?

[redissx 254]

grid-auto-rows высота блока https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows

но если именно пропорция, то только через сам элемент https://doka.guide/css/aspect-ratio/

Изменено 13 февраля 2024 пользователем redissx

[igorek-art 35]

  13.02.2024 в 12:30, redissx сказал:

grid-auto-rows высота блока https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows

но если именно пропорция, то только через сам элемент https://doka.guide/css/aspect-ratio/

Расширить  

Да уже разобрался и сделал, спасибо