布局编辑器:如何在框架布局容器中显示布局？

// App.js
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="container">
      <header>Header</header>
      <main>Main Content</main>
      <aside>Sidebar</aside>
      <footer>Footer</footer>
    </div>
  );
}

export default App;

/* App.css */
.container {
  display: grid;
  grid-template-areas:
    'header header header'
    'main main sidebar'
    'footer footer footer';
  gap: 10px;
  height: 100vh;
}

header {
  grid-area: header;
  background-color: #282c34;
  color: white;
  text-align: center;
  padding: 20px 0;
}

main {
  grid-area: main;
  background-color: #61dafb;
  padding: 20px;
}

aside {
  grid-area: sidebar;
  background-color: #e91e63;
  color: white;
  padding: 20px;
}

footer {
  grid-area: footer;
  background-color: #282c34;
  color: white;
  text-align: center;
  padding: 10px 0;
}