小编Mik*_*nig的帖子

我正在使用 CSS 网格布局来定位网站上的各个部分。我使用grid-column: x / x;和grid-row x / x;来设置它们在页面上的位置和大小。它工作得很好。

现在，我正在尝试在屏幕尺寸更改时发生的两个网格列修复之间的平滑过渡设置动画。变化是 from grid-column: 3 / 9;，grid-column: 2 / 10;这意味着 div 在1fr每一侧都增长。目前它只是“ping”到位，但我希望两者之间有一个平稳的过渡。

任何人有任何想法如何解决它？

这是我的 CSS 文件中的片段：

nav {
    background-color: $company-blue;
    border          : 3px solid $company-yellow;
    opacity         : 0.8;
    grid-column     : 3 / 9;
    grid-row        : 3 / 4;
    ...
    @media screen and (max-width: 1378px) {
    grid-column : 2 / 10;
    }
}