无法使用 CSS 网格显示两个相邻的 div 元素

Question

我试图在彼此相邻的列中获取具有“sidebar”类的 div 元素和具有“editorWindow”类的 div 元素，但它不起作用。

    <div className="mainWrap">
      <div className="sidebar">
         <div className="innerSidebar">
          <div className="sidebarLogo">
            <img src="/code-socket-light.png" className="sidebarLogo" alt="Sidebar Logo"/>
          </div>
          <h3>Connected Users</h3>
          <div className="userList">
            {
              users.map(eachUser => <User key={eachUser.socketId} username={eachUser.username}/>)
            }
          </div>
         </div>
         <button className="btn copyBtn">Copy Code Room ID</button>
         <button className="btn leaveBtn">Leave Code Room</button>
      </div>
      <div className="editorWindow">
        <Editor />
      </div>
    </div>

这是我使用的CSS

.mainWrap{
  display: grid;
  grid-template-columns: 230px 1fr;
}
.sidebar{
  background: #1c1e29;
  padding: 16px;
  color: #fff;
  display:flex;
  flex-direction: column;
}

出了什么问题？

我试图使用 CSS 网格显示“mainWrap”div 中的两个 div 并排显示，但由于某种原因它不起作用。

Answer 1

它的工作🤔

.mainWrap {
  display: grid;
  grid-template-columns: 230px 1fr;
}
.sidebar {
  background: #1c1e29;
  padding: 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
}

    <div class="mainWrap">
      <div class="sidebar">
        <div class="innerSidebar">
          <div class="sidebarLogo">
            <img
              src="/code-socket-light.png"
              class="sidebarLogo"
              alt="Sidebar Logo"
            />
          </div>
          <h3>Connected Users</h3>
          <div class="userList">User</div>
        </div>
        <button class="btn copyBtn">Copy Code Room ID</button>
        <button class="btn leaveBtn">Leave Code Room</button>
      </div>
      <div class="editorWindow">edittor</div>
    </div>