Элемент полной ширины разбивает макет, созданный с помощью display: grid

Question

У меня есть простой макет, который я создал с помощью CSS-сетки, состоящей из основного элемента и боковой панели (см. Фрагмент).Внутри боковой панели у меня есть дочерний элемент, который я хотел бы использовать на мобильных устройствах на всю ширину (т.е. игнорировать заполнение вокруг контейнера макета).

Элемент .full-width работает на всю ширину, ноочевидно, что происходит, когда вся сетка получает 100vw, что делает main и aside переполнением .container (серый элемент).Как я могу сохранить его во всю ширину и держать main и aside в границах .container?Другое требование состоит в том, что элемент полной ширины остается в потоке документа (поэтому нет фиксированного или абсолютного позиционирования).

.page {
    background: pink; 
    padding: 30px; 
}

.container {
    display: grid; 
    grid-template-areas: "aside" "main"; 
    background: grey; 
    padding: 60px 0;
}

aside {
    background: yellow;
}

main {
    background: green; 
}

.full-width {
    width: 100vw; 
    margin-left: -30px;
    background: red;
}

<div class="page">
<div class="container">
    <main>
        <p>I'm the main content</p>
    </main>
    <aside>
        <p>I'm the sidebar</p>
        <div class="full-width">
            <p>I'm the full width element</p>
        </div>
    </aside>
</div>
</div>

Answer 1

Первое и простое решение - установить для столбцов значение 100%, чтобы избежать переполнения:

.page {
  background: pink;
  padding: 30px;
}

.container {
  display: grid;
  grid-template-areas: "aside" "main";
  grid-template-columns: 100%;
  background: grey;
  padding: 60px 0;
}

aside {
  background: yellow;
}

main {
  background: green;
}

.full-width {
  width: 100vw;
  margin-left: -30px;
  background: red;
}

body {
 margin:0;
}

<div class="page">
  <div class="container">
    <main>
      <p>I'm the main content</p>
    </main>
    <aside>
      <p>I'm the sidebar</p>
      <div class="full-width">
        <p>I'm the full width element</p>
      </div>
    </aside>
  </div>
</div>

Или просто используйте отрицательное поле с обеих сторон, чтобы получить желаемую полную ширину:

.page {
  background: pink;
  padding: 30px;
}

.container {
  display: grid;
  grid-template-areas: "aside" "main";
  background: grey;
  padding: 60px 0;
}

aside {
  background: yellow;
}

main {
  background: green;
}

.full-width {
  margin-left: -30px;
  margin-right: -30px;
  background: red;
}
body {
 margin:0;
}

<div class="page">
  <div class="container">
    <main>
      <p>I'm the main content</p>
    </main>
    <aside>
      <p>I'm the sidebar</p>
      <div class="full-width">
        <p>I'm the full width element</p>
      </div>
    </aside>
  </div>
</div>