Javascript 使用网格布局从右到左展开DIV元素并浮动_Javascript_Css_Css Grid

Javascript 使用网格布局从右到左展开DIV元素并浮动

javascript css

Javascript 使用网格布局从右到左展开DIV元素并浮动,javascript,css,css-grid,Javascript,Css,Css Grid,我不确定这是否完全可能。我正在使用display:grid来构建页面布局，我知道我不能对网格项使用float，但是我试图用float来操纵网格项内部的内容，这似乎也不起作用我的布局基本上可以归结为： <html> <head> <style> .page-container{ display:grid; grid-template-columns: 4fr .25fr;

我不确定这是否完全可能。我正在使用

display:grid

来构建页面布局，我知道我不能对网格项使用

float

，但是我试图用float来操纵网格项内部的内容，这似乎也不起作用

我的布局基本上可以归结为：

<html>
<head>
    <style>
        .page-container{
            display:grid;
            grid-template-columns: 4fr .25fr;
            grid-template-rows: repeat(3, 1fr);
            height:100vh;
        }
        .menu{
            grid-column: 2 / span 1;
            grid-row: 2 / span 2;
        }
    </style>
</head>
<body>
    <div class="page-container">
        <div class="menu">
            <div style="background-color:#000;width:100%;height:50px;margin-bottom:25px;"></div>
            <div style="background-color:#000;width:100%;height:50px;margin-bottom:25px;"></div>
            <div style="background-color:#000;width:100%;height:50px;margin-bottom:25px;"></div>
        </div>
    </div>
</body>
</html>


.页面容器{
显示：网格；
网格模板列：4fr.25fr；
网格模板行：重复（3，1fr）；
高度：100vh；
}
.菜单{
格构柱：2/1跨；
网格行：2个/跨度2；
}

我希望发生的是，当用户将鼠标悬停在menu div中的任何项目上时，我希望宽度转换为200px（或与容器无关的其他宽度）。我特别希望div的右边缘被锚定，以便宽度从右向左增长，而不是从左向右增长。使用

right:0可以很容易地做到这一点，但是这会导致网格列也会扩展，从而收缩第一列。相反，我希望div扩展到菜单容器的宽度之外，从而在整个网格中重叠第1列和第2列
有没有一种方法可以使用CSS和/或JavaScript实现这一点？我更喜欢CSS解决方案，但两者都可以
 可以使用负值设置左边距的动画：

.page容器{
显示：网格；
网格模板列：4fr.25fr；
网格模板行：重复（3，1fr）；
高度：100vh；
}
.菜单{
格构柱：2/1跨；
网格行：2个/跨度2；
}
.菜单>分区{
背景色：#000；
高度：50px；
边缘底部：25px；
过渡：所有1；
左边距：0；
}
.菜单>div:悬停{
左边距：-200px；
}
您可以使用负值设置左边距的动画：

.page容器{
显示：网格；
网格模板列：4fr.25fr；
网格模板行：重复（3，1fr）；
高度：100vh；
}
.菜单{
格构柱：2/1跨；
网格行：2个/跨度2；
}
.菜单>分区{
背景色：#000；
高度：50px；
边缘底部：25px；
过渡：所有1；
左边距：0；
}
.菜单>div:悬停{
左边距：-200px；
}

你能说明/模拟一下你想要它的样子吗？你的描述不够清楚。你能举例说明/模拟一下你想要它的样子吗？您的描述不够清楚。@AndreiGheorghiu我认为我们不需要添加宽度。。。如果我们让它自动膨胀，它就和边缘一起膨胀，你是对的。然而，在现实世界中，我认为，在过渡期间，内容会变得一团糟。@AndreiGheorghiu我认为我们不需要增加宽度。。。如果我们让它自动膨胀，它就和边缘一起膨胀，你是对的。然而，我认为，在现实世界的场景中，在过渡期间，那个东西的内容会变得一团糟。