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

@Gerd199 · 21.12.2019, 05:26. **Показов** 891. **Ответов** 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;}

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

Андрей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