Работа с grid, сетка

@Gerd199 · Регистрация: 06.03.2014

Author24 — интернет-сервис помощи студентам

В данный момент есть 2 блока, левый и правый, в них дочерние блоки.

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

HTML5

    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-areas:
        'pl ls';

Далее присваиваем имя блокам, к примеру

HTML5

1	grid-area: pl;

Хорошо, с этим разобрались. Трудность заключается в следующем.

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

Все вроде работает, но из-за этого, создаются огромные пустоты между блока именно из-за высоты. Возможно есть доп свойство или какое другое решение?

В данный момент блоки разбиты на родителей, а перемещение при изменении разрешения экрана. Перемещаю необходимые блоки через js, ловлю событие resize....

Grid это очень удобная технология, хотелось бы найти решение задачи, перемещение блоков через css, не пребигая к js., но вот с различными высотами блоков, хелп

Андрей100 · 21.12.2019, 05:48

другое решение в HTML5 добавить код растягивания
вот этот style=position:absolute;width:500px;height:1000px;>
height:1000px растягивание по вертикали
width:500px растягивание по горизонтали
перед добавлением кода стереть символ > если есть

@Gerd199 · 21.12.2019, 07:41 **[ТС]**

Не совсем понимаю, можно пример?

Андрей100 · 29.12.2019, 06:50

вот пример, тут съежание блоков вниз при изменении разрешения экрана
должно без пустот, но если не поможет добавить к блокам width:7%;height:7%;
туда что поддерживает высоту и ширину,если размер мал получился измените цифры
у вас код не полностью не могу написать точно куда,но обычно это в css,это добавит уменьшение блоков при изменении разрешения экрана

код в HTML5

HTML5

<link rel="stylesheet" href="css/style.css">
<img src="5/1.png"/>
<img src="5/2.png"/>
<img src="5/2.png"/>
<img src="5/1.png"/>
<img src="5/1.png"/>

код в css съежать без css будет но позиция будет по левуму краю и без цвета фона

HTML5

1	body{background:#000000;position:absolute;left:100;top:80px;}

Андрей100 8 / 34 / 13 Регистрация: 15.11.2018 Сообщений: 224
	21.12.2019, 05:48	2
	другое решение в HTML5 добавить код растягивания вот этот style=position:absolute;width:500px;height:1000px;> height:1000px растягивание по вертикали width:500px растягивание по горизонтали перед добавлением кода стереть символ > если есть 0

@Gerd199 19 / 17 / 5 Регистрация: 06.03.2014 Сообщений: 3,066
	21.12.2019, 07:41 [ТС]	3
	Не совсем понимаю, можно пример? 0

	29.12.2019, 06:50