Компенсировать адаптивные отступы родителя, дочерним блокам
* {
position: relative;
padding: 0;
margin: 0;
outline: none;
letter-spacing: 1px;
box-sizing: border-box;
}
.m_bl {
--padding:clamp(10px, 2%, 20px);
--paddingm:clamp(-10px, -2%, -20px);
display: grid;
grid-template-columns: 1fr max(200px, 30%);
grid-template-rows: min-content 1fr;
align-items: start;
grid-template-areas: 'pl rk' 'cn rk';
padding:var(--padding);
gap:var(--padding);
}
.open .m_bl {
grid-template-areas: 'pl pl' 'cn rk';
}
.open .pl {
margin-left: var(--paddingm);
margin-top: var(--paddingm);
margin-right: var(--paddingm);
}
.pl {
height: 200px;
background: gold;
grid-area: pl;
}
.content {
height: 100px;
background: red;
grid-area: cn;
}
.rk {
height: 800px;
background: green;
grid-area: rk;
}<body class='open'>
<div class='m_bl'>
<div class='pl'></div>
<div class='content'></div>
<div class='rk'></div>
</div>
</body>Выставлены
--padding:clamp(10px, 2%, 20px);
--paddingm:clamp(-10px, -2%, -20px);
Добавляю класс 'open', меняю расположение блоков. Необходимо сдвинуть верхний блок на столько, чтобы закрыть им отступы. По левому, правому и верхнему краю
.open .pl {
margin-left: var(--paddingm);
margin-top: var(--paddingm);
margin-right: var(--paddingm);
}
Что та не выходит. То есть отступы оставить, только верхний блок закрыть ими... Данные отступы, динамичны, не статичны.