在网格中彼此相邻对齐项目[重复]

Question

我正在尝试在网格中使用网格之类的东西，我想问一下如何使“橙色”主要元素紧挨“蓝色”元素旁边。我可以问如何解决它，使元素不是彼此下方，而是彼此相邻。

body {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

header {
  grid-area: header;
  background-color: #111af5;
}

aside {
  grid-area: sidebar;
  background-color: #3faaf5;
}

article {
  grid-area: content;
  background-color: #bada55;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "main article-aside";
}

footer {
  grid-area: footer;
  background-color: #ccc333;
}

main {
  grid-area: "main";
  background-color: orange;
}

article aside {
  grid-area: "article-aside";
}

<header>Header</header>
<aside>Lorem
</aside>
<article>
  <main>Lorem</main>
  <aside>Lorem</aside>
</article>
<footer>Footer</footer>

Answer 1

去掉article-aside周围的引号

article aside{
    grid-area: article-aside;
}

“article-aside”是一个无效值。