使div填充整个CSS网格'；当其他零件不可用时，s行

如果我想使用css网格，当另一个子元素不在屏幕上时，让它的一个子元素填充剩余的宽度，我该怎么做呢

var-button=document.querySelector（'.click'）；
var buttone=document.querySelector（'.clicke'）
var left=document.querySelector（'.left'）；
按钮。addEventListener（'click'，函数（e）{
left.style.display='none'；
})
buttone.addEventListener（'click'，函数（e）{
left.style.display='block'；
})

html，
身体{
保证金：0；
}
.包裹{
显示：网格；
宽度：100vw；
高度：100vh；
背景色：黑色；
网格模板柱：1fr 1fr；
网格模板区域：“左-右”
}
.左{
网格区域：左侧；
背景颜色：绿色；
}
.对{
网格区域：右；
背景颜色：红色
}

把我藏起来
给他看

当

网格

冗余时，将

显示

改为

块

尽管您已声明：

我可以使用其他显示器轻松实现此效果，但我想知道是否有一种方法可以做到这一点，同时使用网格显示器，并对其区域进行专门布局

此方法在需要时保留

display:grid

布局，但在不需要时将其丢弃以支持

display:block

作弊？这不是；-）

const hide=document.querySelector（'.hide'），
show=document.querySelector（'.show'），
wrap=document.querySelector（'.wrap'）；
hide.addEventListener（'click'，function（）{
wrap.classList.add（'hidden'）；
} );
show.addEventListener（'单击'，函数（））{
wrap.classList.remove（'hidden'）；
} );
html，正文{
保证金：0；
}
.包裹{
显示：网格；
宽度：100vw；
高度：100vh；
背景色：黑色；
网格模板柱：1fr 1fr；
网格模板区域：“左-右”；
}
.wrap.hidden{
显示：块；
}
.wrap.hidden.左{
显示：无；
}
.wrap.hidden.对{
高度：100vh；
}
.左{
网格区域：左侧；
背景颜色：绿色；
}
.对{
网格区域：右；
背景色：红色；
}

把我藏起来
给他看
不要定义区域以便列可以灵活，设置
网格模板列：1fr带有
网格自动流：列和
网格自动列：50%


var-button=document.querySelector（'.click'）；
var buttone=document.querySelector（'.clicke'）
var left=document.querySelector（'.left'）；
按钮。addEventListener（'click'，函数（e）{
left.style.display='none'；
})
buttone.addEventListener（'click'，函数（e）{
left.style.display='block'；
})
html，
身体{
保证金：0；
}
.包裹{
显示：网格；
宽度：100vw；
高度：100vh；
背景色：黑色；
网格模板列：1fr；
网格自动列：50%；
网格自动流：列；
}
.左{
背景颜色：绿色；
}
.对{
背景颜色：红色
}

把我藏起来
给他看
至少在这种情况下，设置

gridColumnStart: 1;

以获得所需的布局。元素占据命名区域和第一列

然而，我不确定是否有可能使这个解决方案更具普遍性


var-button=document.querySelector（'.click'）；
var buttone=document.querySelector（'.clicke'）
var left=document.querySelector（'.left'）；
var right=document.querySelector（'.right'）；
按钮。addEventListener（'click'，函数（e）{
left.style.display='none'；
right.style.gridColumnStart='1'；
})
buttone.addEventListener（'click'，函数（e）{
left.style.display='block'；
right.style.gridColumnStart=''；
})
html，
身体{
保证金：0；
}
.包裹{
显示：网格；
宽度：100vw；
高度：100vh；
背景色：黑色；
网格模板柱：1fr 1fr；
网格模板区域：“左-右”
}
.左{
网格区域：左侧；
背景颜色：绿色；
}
.对{
网格区域：右；
背景颜色：红色
}

把我藏起来
给他看
是否可以使其具有可伸缩性，即如果有多行（如上面的一行），那么每行是否可以在不中断网格的情况下保持其行为？我只是试了一下，结果弄得一团糟（我还不太了解网格）。@FredGandt我不知道你的意思。你能给我举一个多行场景的例子吗？我想这是另一个问题。我会自己处理，如果我弄不明白，我会在这里发布一个问题，给你一个提示。在英国很晚；晚安：-）我提交了一个解决方案，但只是读了“其区域被专门布置”。你是说那些列的行为是那样的吗？是否可以删除
网格模板区域
？很抱歉，评论太晚。我希望我可以保留网格模板区域，以便将来重新排列网格显示，但我认为我可以解决这个问题。当一个项目被删除时，将另一个项目设置为网格列：1/-1。或者，不使用显式列，而是使用设置为1fr的隐式列。