Reactjs css网格&x2B；反应组件挑战

使用codepen中的React处理css网格挑战

这是原始代码笔： 到目前为止，我所拥有的：

---

所以我得到了跨越网格容器的主要内容区域。然而，我一直在思考如何使搁置的文件始终为150px，并且网格容器与顶部的div很好地对齐

我是新来的

grid

非常好的第一次尝试。我觉得这有点老套，但是……它确实起作用了（我想）

我认为这个代码段上的CSS不会起作用，但是

//不要为CSS网格挑战编辑JS！
类应用程序扩展了React.Component{
状态={
sidebarActive:错误，
}
toggleSidebar（）{
this.setState（{sidebarActive:！this.state.sidebarActive}）
}
render（）{
const buttonText=this.state.sidebarActive？'Toggle Sidebar Off'：'Toggle Sidebar On'；
const{sidebarActive}=this.state
返回(
某些部分不渲染时的CSS网格！
挑战：修复CSS网格，以便在边栏react组件不渲染时，主区域占据所有可用空间

{buttonText}
{sidebarActive&&有时渲染！}
应始终占据容器中剩余空间的主要内容区。
);
}
}
ReactDOM.render（，document.getElementById（'app'））
//变量
$品牌颜色：深蓝色；
$品牌部分颜色：白色；
$brand text color:#222；
$react重音：#61daff；
$react背景：#292c34；
$breakpoint:768px；
$font标题：“永久标记”，无衬线；
$font default:'Oswald'，无衬线；
//风格
身体{
字体系列：$font default；
利润率：10vh 10vw；
颜色：口音；
背景：反应背景；
}
.标题{
字体系列：$字体标题；
}
.说明{
填充：5PX12PX20PX12PX；
边缘底部：20px；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
证明内容：中心；
背景：变亮（调整色调（$react background，30），7）；
字体大小：1.15rem；
钮扣{
边界：无；
背景：口音；
字体系列：$font default；
填充：20px；
边界半径：0；
光标：指针；
过渡期：放松；
&：悬停，&：激活，&：聚焦{
背景：调整色调（$react重音，210）；
}
}
}
.网格容器{
花边：2件淡黄色一枝黄花；
显示：内联网格；
网格模板列：150px重复（1，1fr）；
高度：100vh；
宽度：100%；
栅极间隙：30px；
}
.侧边栏{
背景：背景，7）；
填充：10px；
&~main{
网格列：自动！重要；
}
}
梅因先生{
背景：变暗（$react background，7）；
显示：网格；
格构柱：跨度2；
}
我知道这是一个非常晚的回应，但我记得这个挑战。。。我无法抗拒

我的方法是将
main
固定到第二列，同时在项目本身上设置
侧栏
宽度（以及
右边距
以伪造
网格间隙
），允许将第一列声明为
最小值（0，自动）


这样，如果没有加载侧栏，第一列的宽度将为零，并且在加载时使用150px侧栏。
我对grid非常陌生，我很喜欢它。我不知道这是否是正确答案，但必须使用网格列开始/结束；）很棒的方法！：）也许你应该解释一下你在做什么，这样别人就可以很容易地理解。如果我没有遗漏什么，它只是使用同级选择器来修改.main上的网格列，这样当存在上一个.sidebar同级时，它就从“auto”变为“span 2”。太棒了。不需要使用这个工具！重要的btwIndeed。当没有侧栏时，
.main
类使用css属性
网格列：span 2占据所有空间（主容器有两列，一列带有150px，另一列填充其余部分）。当then侧边栏出现（
&
）时，我使用同级选择器
~
来更改
.main
类的“span”，它现在只填充其余部分（宽度-150px）。我不会想到使用同级选择器！这实际上让事情变得更加直截了当。谢谢：）
.grid-container {
    border: 2px dashed goldenrod;
    display: inline-grid;
    padding: 10px;
    grid-template-columns: auto auto;
    height: 100vh;
    grid-gap: 30px;
}

.grid-container {
  grid-template-columns: minmax(0, auto) 1fr;
  /*grid-gap: 30px;*/
}
.main {
  grid-column: 2;
}
.sidebar {
  margin-right: 30px;
  width: 150px;
}