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

@Gerd199 · 21.12.2019, 05:26. **Показов** 837. **Ответов** 3

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

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

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

HTML5
1
2
3
4
    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;heig ht:1000px;>
height:1000px растягивание по вертикали
width:500px растягивание по горизонтали
перед добавлением кода стереть символ > если есть

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

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

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

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

код в HTML5

HTML5
1
2
3
4
5
6
<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;}

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

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

@Gerd199 Заблокирован
	21.12.2019, 07:41 [ТС]
	Не совсем понимаю, можно пример? 0