Добрый день. Такой вопрос – у меня есть страница, состоящая

из 4-х виджетов:
1) верхний левый – 1/3 ширины,
2) верхний правый – 2/3 ширины,
3) первый нижний полной ширины,
4) второй нижний полной ширины.
Общая структура кода
<div class="grid-container">
<div class="widget-left">
<div class="widget-content"
<div class="widget-right" s
<div class="widget-full-width">
<div class="widget-full-width">

Применённые стили:
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr; /* Деление на 1/3 и 2/3 ширины */
grid-template-rows: auto auto; /* Авто высота для обоих верхних виджетов */
/*border: 10px yellow solid;*/
padding: 0;
margin: 20px 160px 30px 160px;
}

.widget-left {
/*background-color: lightgray;*/
padding: 20px;
}

.widget-right {
/*background-color: lightblue;*/
padding: 20px;
}

.widget-full-width {
/*background-color: cornflowerblue;*/
padding: 20px;
grid-column: span 2; /* Занимает 2 столбца */
display: grid;
grid-template-rows: auto auto; /* Авто высота для header и body */
width: 100%;
}

Какими свойствами должны обладать эти виджеты, чтобы находящиеся в них элементы не выходили за их пределы и чтобы такие элементы можно было позиционировать относительно данных родительских виджетов?

Коля Нечепаев
что именно ты делаешь тут нечего нет и вопрос до ч...

вопрос общего характера - как сделать так, чтобы дочерние элементы не выходили за пределы этих виджетов при изменении их размеров, и их можно было передвигать, в частности задавая паддинги, марджины относительно виджетов

Коля Нечепаев
ты когда не будь писал на html? ты глянь на свой к...

По идее все виджеты должны быть внутри grid container

ты сначала посмотри как пишутся <div> и закрытый </div> и почитай обетом и про другие теги это не код что был верху)))))

да но и должно быть и закрытый тег? или нет!...

<div class="grid-container"> <div class="widget-left"> <div class="widget-content"></div> </div> <div class="widget-right"></div> <div class="widget-full-width"></div> <div class="widget-full-width"></div> </div> Надеюсь так понятнее выглядит

"чтобы находящиеся в них элементы не выходили за их пределы" у них должны быть относительные размеры например у тебя грид контейнер имеет 100vh 100wh на весь экран соответственно сетка будет поделена на равные ячейки по ширине и высоте в каждой ячейке у виджета должны быть размеры высоты и ширины 100% чтобы растянуть виджет на всю ячейку ну и внутри виджета вся остальная магия

https://codepen.io/Kid-Samort/pen/NWePXvG

Наверное Вы не учли, что в самом верху будут 2 виджета - на 1/3 ширины, и на 2/3 ширины

ты пришол скопировать вставить код или разобраться в своих знаниях?