使用 React 和 CSS Grid 的复杂布局答案

【问题标题】：Complex layout using React and CSS Grid使用 React 和 CSS Grid 的复杂布局
【发布时间】：2019-04-05 12:27:38
【问题描述】：

所以我正在尝试创建上述内容。有没有制作菜单组件的聪明方法？还是容器元素必须覆盖大部分内容组件（它必须是一个矩形，并且本身使用 CSS Grid 来定位菜单的左侧和顶部）？

【问题讨论】：

菜单组件是否需要像“L”形一样，或者您可以将其拆分为单独的部分吗？菜单和内容之间应该有空格吗？更多信息将不胜感激。编辑：我已经按照以下方式构建了一些东西：这会有帮助吗？ i.imgur.com/okWpgBX.png
@Neil 希望将它作为一个单独的组件！否则我会把它分开！

标签： css reactjs css-grid

【解决方案1】：

这不完全符合您对单个“L”形组件的要求，但应该让您比以前更接近。

值得一提的几点说明：

这只是以 html/css 问题的形式回答您的问题，而不是 React 风格。您可以使用除body-content 之外的每个 html/css 元素，然后将 body-content html/css 作为子元素，将其拆分为您希望的两个组件
不确定您希望如何处理您的内容，但使用此代码，App-Header 将随着您的内容滚动。如果您希望它被修复并保持在内容上方，请复制 MainMenu 的 css，但将其设置为垂直滚动。

希望这能让你朝着正确的方向前进。

body {
  margin: 0px;
}

.App-header {
  background-color: #203764;
  height: 80px;
  padding: 10px;
  color: white;
}

/* Style page content */
.main-content {
    margin-left: 160px; /* Same as the width of the MainMenu */
}

.body-content {
  padding: 20px;
}


/* The MainMenu menu */
.MainMenu {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 160px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    color: #FFF;
}

<div class="App">
  <div class="MainMenu">Main Menu</div>
  <div class="main-content">
    <header class="App-header">Header</header>
    <div class="body-content">Content</div>
  </div>
</div>

【讨论】：