Зона сетки должна занимать два ряда, а не два столбца

Question

Я пытался создать макет, который выглядит следующим образом:

Это код:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "main aside"
                       "main main";
}

.wrapper > aside {
 grid-area: aside;
}

.wrapper > main {
  grid-area: main;
}

<section class="wrapper">
  <aside>Aside</aside>
  <main>MAIN</main>
</section>

Answer 1

Вот основная проблема:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "main aside"  <--- problem
                       "main main";  <--- problem
}

Вы можете установить только прямоугольные области сетки с grid-template-areas.

Тетрисоподобные фигуры недопустимы (по крайней мере, в текущей версии CSS).Сетка, которая является Уровень 1 ).

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

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-auto-rows: 50px;
}

.wrapper > aside {
  grid-row: 1;
  grid-column: 2;
  z-index: 1;
  border: 2px solid blue;
}

.wrapper > main {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
  border: 2px solid red;
}

<section class="wrapper">
  <aside>Aside</aside>
  <main>MAIN</main>
</section>

Подробнее:

• области шаблона-сетки с рисунком ASCII не работают
• Неправильное расположение областей сетки в сетке CSS

Answer 2

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

Float не устарел и может быть полезен, даже если display стал очень хорошим. так вот из моего комментария и старой ручки пример, похожий на вашу сетку.

Это примерно https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

A контекст форматирования блока является частью визуальной CSS-визуализации веб-страницы. Это область, в которой происходит размещение блоков блоков, и в которой плавающие элементы взаимодействуют с другими элементами.

демо ниже

/* my grid not flexible enough ...

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "main aside"
                       "main main";
}

.wrapper > aside {
 grid-area: aside;
}

.wrapper > main {
  grid-area: main;
}

*/
/* back to the past */
.wrapper {
  overflow: hidden;/* to keep float inside */
}

.wrapper aside {
  float: right;
  width: 300px;
}


/*makup*/
.wrapper {
  box-shadow: 0 0 0 3px inset red;
}
.wrapper aside {
  padding: 1em;
  border: solid;
  box-shadow: 0 0 0 3px white, 0 0 0 6px red;
  margin: 0 0 1.5em 1em;
}

main {
  padding: 1em;
}

<section class="wrapper">
  <aside>Aside</aside>
  <main>MAIN</main>
</section>

, чтобы содержимое main переместилось в aside, помните, что вы имеете дело с float, не сбрасывайте отображение или переполнение на main, чтобы сохранить его таким, читайте о контексте форматирования блока.